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

html-css020

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

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下:\x0d\x0a1.被点击时的效果可以用div:active{ css }\x0d\x0a\x0d\x0a2.鼠标覆盖在上面的时候可以用div：hover{ css}\x0d\x0a\x0d\x0a3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下：\x0d\x0a\x0d\x0aa.先给div添加一个选中的样式比如on{css}；\x0d\x0a\x0d\x0ab.然后在js中$('div').click(function{\x0d\x0a$('div').toggleClass(' ','on')\x0d\x0a})\x0d\x0a这是jquery自带的一个方法，点击div切换2个class,

用css写足矣，css中有focus这个神奇的东西，难道你没有用过吗，给你个例子吧

html:

<input type="text" placeholder="Enter Name." name="name" maxlength="300" class="input">

css:

.input {

border:0 

padding:10px 

font-size:1.3em 

font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI"

color:#ccc 

border:solid 1px #ccc 

margin:0 0 20px 

width:300px

-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2) 

-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2) 

box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2)

-webkit-border-radius: 3px 

-moz-border-radius: 3px 

border-radius: 3px

}

input:focus { 

    outline: none !important

    border:1px solid red

    box-shadow: 0 0 10px #719ECE

}

$(".XXX").click(function(

$(".XXX").removeClass(".current")

$(this).addClass(".current")

))

一般这样就能解决问题了

先点击你选择的，所有的.XXX的class 取消.current（class），然后给当前的div添加.XXX（class）