代码之家 › 专栏 › 技术社区 › ryan

丢失带有jquery的CSS悬停

hover css jquery

ryan · 技术社区 · 17 年前

在单击其中一个菜单项之前,CSS悬停正常工作。我相信问题开始于我添加了这一行

$("#buttons li a:not(a." + target + ")").css("background-position","0 0");

CSS

#buttons {float:left;}
#buttons ul {list-style-type:none;cursor:pointer;overflow:hidden;}
#buttons ul  li {height:195px;width:40px;float:left}
#buttons a {display:block;height:195px;width:40px;border:none;cursor:pointer;}
#buttons a.settings:hover, #buttons a.duels:hover, #buttons a.messages:hover {background-position: -40px 0;}
#buttons a.settings {background:url(accountsettings.png)}
#buttons a.something {background:url(accountsomething.png)}
#buttons a.messages {background:url(accountmessages.png)}

#text{width:600px;height:199px;overflow:hidden;float:left;}
div#text div {width:600px;height:199px;float:left; margin-left:20px;}

HTML

<div id="buttons">
        <ul>
            <li><a class="settings"></a></li>
            <li><a class="something"></a></li>
            <li><a class="messages"></a></li>
        </ul>
    </div>

    <div id="text">
       <div id="settings">
          <h2>Account Settings</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
       </div>
       <div id="something">
          <h2>Something</h2>
          <p>Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.</p>
       </div>
       <div id="messages">
          <h2>Messages</h2>
          <p>Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.</p>
       </div>      
    </div>

脚本

 <script language="javascript" type="text/javascript">

    $("div#text div:not(#settings)").hide();
    $("#buttons li a.settings").css("background-position", "-40px 0");

    $("#buttons li a").click(function(){
        var target = $(this).attr("class");
        $("#buttons li a:not(a." + target + ")").css("background-position","0 0");
        $(this).css("background-position", "-40px 0");
        $("#"+target).show("slide", { direction: "left" }, 500);
        $("#text div").not("#"+target).hide("slide", { direction: "right" }, 500);
    });

 </script>

2 回复 | 直到 17 年前

ScottE 17 年前

设置CSS内联将优先于样式表-因此尝试切换类。

我不知道你想达到什么样的效果,所以一些addClass()、removeClass()或toggleClass()的组合可以做到这一点。

Russ Cam 17 年前

这是你想要的吗- Working Demo

$(function() {

    $("div#text div:not(#settings)").hide();
    $("#buttons li a.settings").css("background-position", "-40px 0");

    $("#buttons li a").click(function(){
        var target = $(this).attr("class");
        $("#buttons li a:not(a." + target + ")").css("background-position","0 0");

        $(this).css("background-position", "-40px 0");
        $("#"+target).show("slow");
        $("#text div").not("#"+target).hide("slow");
        return false;
    });
});

这个 show() 和 hide() jquery命令只接受两个参数:speed和回调。您有一个字符串动画名称、一个对象和一个数字作为参数。