当前位置：首页 → 问答吧 → 用jquery的addclass，当鼠标移到li上给li增加样式,请帮忙

用jquery的addclass，当鼠标移到li上给li增加样式,请帮忙

时间：2011-10-23

来源：互联网

代码：
HTML code


<style>
ul li p{display:none}
ul li.on{display:block}
</style>
<ul>
<li>北京大学<p>隐藏图文，只有li样式为on时显示</p></li>
<li>清华大学<p>隐藏图文，只有li样式为on时显示</p></li>
<li>复旦大学<p>隐藏图文，只有li样式为on时显示</p></li>
</ul>

需要说明：当鼠标移到哪个li时,那个li就为<li class="on">.以显示隐藏内容。

请帮忙，谢谢。

作者: amhoho 发布时间: 2011-10-23

没怎么理解你想干什么，如果是想鼠标移到哪个，就显示哪个的隐藏内容的话，可以试试这个：
HTML code

<style>
ul li p{display:none}
ul li:hover p{display:block}
</style>
<ul>
<li>北京大学<p>隐藏图文，只有li样式为on时显示</p></li>
<li>清华大学<p>隐藏图文，只有li样式为on时显示</p></li>
<li>复旦大学<p>隐藏图文，只有li样式为on时显示</p></li>
</ul>

作者: Snow_Cold_Wind 发布时间: 2011-10-24

是我没讲清楚，我需要的效果你可以看看当当网首页右侧促销活动版块，http://www.dangdang.com/

作者: amhoho 发布时间: 2011-10-24

引用 2 楼 amhoho 的回复:

是我没讲清楚，我需要的效果你可以看看当当网首页右侧促销活动版块，http://www.dangdang.com/

你的CSS貌似有问题，我不太懂CSS，给你写了一个效果，应该是这样的，不过貌似有些问题
JScript code

$(document).ready(function () {
            $("ul>li").each(function () {
                $(this).hover(function () {
                    $(this).children().show();
                }, function () {
                    $(this).children().hide();
                });
            });
        })

作者: liujiebest 发布时间: 2011-10-24

HTML code


<style>
ul li.on{color:red}
</style>

<ul>
<li>北京大学<p style="display:none">隐藏图文，只有li样式为on时显示</p></li>
<li>清华大学<p style="display:none">隐藏图文，只有li样式为on时显示</p></li>
<li>复旦大学<p style="display:none">隐藏图文，只有li样式为on时显示</p></li>
</ul>

window.onload = function(){
    var els = document.getElementsByTagName("li");
    for (var i = els.length; i--;){
        var el = els[i];
        el.onmouseover = (function(el){
            return function(){
                el.className = "on";
                el.children[0].style.display = "";
            }
        })(el)
        el.onmouseout = (function(el){
            return function(){
                el.className = "";
                el.children[0].style.display = "none";
            }
        })(el)
    }
    
}

作者: liangws 发布时间: 2011-10-24

3楼和1楼一样，无论js和css都实现了划过的时候显示隐藏内容，但是我还需要的是如果鼠标离开ul的范围则保留当前的'on'样式不动

作者: amhoho 发布时间: 2011-10-24

引用 5 楼 amhoho 的回复:

3楼和1楼一样，无论js和css都实现了划过的时候显示隐藏内容，但是我还需要的是如果鼠标离开ul的范围则保留当前的'on'样式不动

那改成这样吧
JScript code


window.onload = function(){
    var el = document.getElementById("ulId"),
        obj;
       el.onmouseover = function(_e){
           var e = _e || window.event,
               _target = e.target || e.srcElement;
           if (_target.tagName === "LI"){
               if (obj){
                   obj.className = "";               
                   obj.children[0].style.display = "none";
               }               
               _target.className = "on";
               obj = _target;
               obj.children[0].style.display = "";
           }
       }
    
}