css样式点击事件,css按钮被点击之后的样式

怎样给css样式里引入的图片添加点击事件

点击事件只能设置在html元素中，所以background是没有办法设置点击的。但是，它的元素div是有点击事件onclick的。如果div设置onclick无效，建议使用jquery来绑定div的click事件。

此外，由于div中还有其它元素有click事件，所以，这就涉及到了事件冒泡的问题。

那么，说到这，指出你的一个代码问题。网页中，html元素的id必须是唯一的。如果id不唯一，一代涉及id，程序可能会出错。而class才是可以重复的。

可以如下纠正：

input type="submit" name="button" id="btn_searc" value=" " class="button"

input type="button" name="button" id="btn_ask" value=" " class="button"

下面就是解决事件冒泡问题了，还是建议jquery来解决

对于div的内层元素，我们使用jquery来绑定它的单击事件，并且静止响应div的单击事件

$('#btn_searc').blind('click',function(event){

searchPost(); //这里响应id为btn_searc元素的单击事件

event.stopPropagation(); //这局话就是停止事件冒泡了，也就是说，接下来的div的单击事件将不再会被响应。

});

同理，另外一个原色的单击事件可以如下

$('#btn_ask').blind('click',function(event){

ask();

event.stopPropagation();

});

那么，接下来就是去绑定div的单击事件，首先，还是将div的class改成id，并保证其唯一性。同时，css也要改成id的选择器：

#communion_header{

height: 88px;

width: 690px;

margin: 0 auto;

background: url(../../images/communicate/communtion_logo.png) no-repeat 50px 30px;

padding: 40px 0 0 270px;

}

jquery绑定click

$('#communion_header').click(function(){

//这里写div的单击代码。可以使用JavaScript，更可以使用其进阶语言jQuery

});

最后，需要说明的是，代码使用的是JavaScript语言的一种进阶语言jQuery。它的使用要借助于jQuery库的存在。所以你必须去下载个jquery.js，并且在网页中添加关联。

相关问答

Q1: 如何解决css“下层元素阻止了上层元素的点击事件”？

使用z-index:来给元素层定位置。\x0d\x0a\x0d\x0aCSS pointer-events\x0d\x0aPointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。\x0d\x0a将它应用到一个元素\x0d\x0a如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素，就像这样：\x0d\x0a \x0d\x0a .overlay { \x0d\x0a pointer-events: none; \x0d\x0a } \x0d\x0a \x0d\x0a\x0d\x0a浏览器支持\x0d\x0a到目前为止，Firefox 3.6+、Safari 4 和Google Chrome支持Pointer-events。我觉得Opera和IE肯定会尽快赶上，我不知道它们的计划中是否支持它。

Q2: 如何做鼠标点击事件更改CSS？

做鼠标点击事件更改CSS方法：

若点击AAA后一直都是none，点任意一个地方都是none.

div class="BBB" style="display: none;"

则把hide,show方法，换成css()，和你上面那样式放进去即可。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

Q3: CSS可以做鼠标点击事件吗？

不可以的说，只有input有check的方法，尽量使用javascript

document.getElementById('element').addEventListener("click",function_name)

Q4: css 点击后样式

/* 字体链接样式 */

td.firstLevelMenuClass a:link {color: #3E8BAC; text-decoration: none;}      /* 未访问的链接 */

td.firstLevelMenuClass a:visited {color: #FFFFFF; text-decoration: none;}    /* 已访问的链接 */

td.firstLevelMenuClass a:hover {color: #FFFFFF;}    /* 鼠标移动到链接上 */

td.firstLevelMenuClass a:active {color: #FFFFFF;}   /* 选定的链接 */

/* 鼠标事件背景样式 */

td.firstLevelMenuClass:hover {background-image: url(../../Public/img/menu_first_down_bg.gif); }  /* 鼠标移动到链接上 */

td.span style="color:#cc0000;"firstLevelMenuClassHover/span{background-image: url(../../Public/img/menu_first_down_bg.gif); }

td.firstLevelMenuClass{background-image: url(../../Public/img/head_menu_center.gif); }

JS:

[javascript] view plain copy

/*

* 取得对应类和标签的HTML元素

* clsName:给定类名

* tagName：给定的HTML元素，如果为任意 tagName='*'

*

*/

function getElementsByClassName(clsName, tagName) {

var ClassElements = [];

selElements = document.getElementsByTagName(tagName);

for (var i = 0; i  selElements.length; i++) {

if (selElements[i].className == clsName) {

ClassElements[ClassElements.length] = selElements[i];

}

}

return ClassElements;

}

//通过改变元素class名达到间接改变背景样式

function onFirstMenuChangeBg(e) {

//先清除已经改变的元素背景样式

var getElements = getElementsByClassName('span style="color:#cc0000;"firstLevelMenuClassHover/span', 'td');

for (var i = 0; i  getElements.length; i++) {

getElements[i].className = "firstLevelMenuClass";

}

//设置鼠标点击元素背景样式

e.className = "firstLevelMenuClassHover";

}

HTML:

[html] view plain copy

td class="firstLevelMenuClass" id="firstLevelMenu0"  onclick="onFirstMenuChangeBg(this);" 

a href='#'测试0/a

/td

td class="firstLevelMenuClass" id="firstLevelMenu1"  onclick="onFirstMenuChangeBg(this);" 

a href='#'测试1/a

/td

td class="firstLevelMenuClass" id="firstLevelMenu2"  onclick="onFirstMenuChangeBg(this);" 

a href='#'测试2/a

/td