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

html-css021

怎样用css实现div选中的效果,第1张

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

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,

css里面做。

app的选中效果不是超链接就是功能按钮,这些选中的效果都是由css来操作的,可以加各种效果。

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

我这个只是实现你说的正在访问的文字有不同于其他文字的效果

用一个简单的js就可以

js里:

function xk(n){

for(var i=1i<=6i++){

var curB=document.getElementById("nav"+i)

if(n==i){

curB.className="active"

}else{

curB.className="none"

}

}

}

css里:加一个选中后的样式

.active{} /*he js里的curB.className="active"名称对应*/

菜单:

<ul>

<li onclick="return xk(1)" id="nav1" class="none"><a href="/">11111</a></li>

<li onclick="return xk(2)" id="nav2" class="none"><a href="/">22222</a></li>

<li onclick="return xk(3)" id="nav3" class="none"><a href="/">33333</a></li>

<li onclick="return xk(4)" id="nav4" class="none"><a href="/">44444</a></li>

<li onclick="return xk(5)" id="nav5" class="none"><a href="/">55555</a></li>

<li onclick="return xk(6)" id="nav6" class="none"><a href="/">66666</a></li>

</ul>

虽然代码可能有点麻烦 但是可以实现