鼠标经过时变色

如何实现鼠标经过时变色呢?

如图:

------------------------------------

 如何实现鼠标放在上面时表格的行变色呢?

有如下两种方式:

方式一:使用纯css

div.queryResultDiv table.productList tr:nth-child(n+2):hover
{
    background-color: #B0D2FF;
}

说明:n从零开始,所以hover从第二行才有效,因为表格第一行是标题.

方式二:使用javascript脚本:

$("div.navarea #main2 tr").bind(‘mouseover‘,function(){
        var href22=$(this).find(‘a‘);
        var selectedHref=$(‘div.navarea #main2 li.current a‘);
        $(‘#main2 tr‘).addClass("not_current").removeClass("current");
    href22.addClass("current");
    });
});

注意:以上js依赖jquery

以上是针对表格,下面讲解通过ul标签页可以实现相同的效果.

HTML代码如下:

<div id="selectHospitalsDiv" class="selectHospitals" style="height: 200px;">
                          <ul id="selectHospitalsUl">
                             <li onclick="onSelectHospital(this)" data="13096" value2="荆州市第三人民医院">1&nbsp;,&nbsp;&nbsp;荆州市第三人民医院 --- 沙市</li>
                             <li onclick="onSelectHospital(this)" data="13146" value2="荆州市第五人民医院">2&nbsp;,&nbsp;&nbsp;荆州市第五人民医院 --- 荆州</li>
                             <li onclick="onSelectHospital(this)" data="13149" value2="荆州市中心医院">3&nbsp;,&nbsp;&nbsp;荆州市中心医院 --- 荆州</li>
                             <li onclick="onSelectHospital(this)" data="13152" value2="荆州妇幼保健院">4&nbsp;,&nbsp;&nbsp;荆州妇幼保健院 --- 荆州</li>
                             <li onclick="onSelectHospital(this)" data="13240" value2="荆州区中医院">5&nbsp;,&nbsp;&nbsp;荆州区中医院 --- 沙市</li>
                             <li onclick="onSelectHospital(this)" data="13293" value2="荆州第五人民医院">6&nbsp;,&nbsp;&nbsp;荆州第五人民医院 --- 沙市</li>
                             <li onclick="onSelectHospital(this)" data="13377" value2="荆州市中医院">7&nbsp;,&nbsp;&nbsp;荆州市中医院</li>
                             <li onclick="onSelectHospital(this)" data="13528" value2="荆州黄医生诊所">8&nbsp;,&nbsp;&nbsp;荆州黄医生诊所</li>
                             <li onclick="onSelectHospital(this)" data="13660" value2="荆州花园">9&nbsp;,&nbsp;&nbsp;荆州花园</li>
                          </ul>
                        </div>

css样式如下:

div.selectHospitals ul li:hover{
    background-color: rgba(1,1,1,0.1);
    color: #e60012;
}

参考:http://hw1287789687.iteye.com/blog/2184358

http://hw1287789687.iteye.com/blog/2184359