怎样用css实现div选中的效果_IT百科

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下:

1.被点击时的效果可以用div:active{

css

}

2.鼠标覆盖在上面的时候可以用div：hover{

css}

3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下：

a.先给div添加一个选中的样式比如on{css}；

b.然后在js中$('div').click(function{

$('div').toggleClass('

','on')

})

这是jquery自带的一个方法，点击div切换2个class,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>添加table列</title>

$(document).ready(function(e) {

$(".jquery_div").click(function(){

alert("jquery单击")

})

function js_click(){

alert("js_单击")

}

</script>

</head>

<body>

<div class="jquery_div">jquery单击</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

怎样用css实现div选中的效果