文章/答案/技术大牛

发布

问jQuery滚动和css :悬停
EN

Stack Overflow用户

提问于 2014-02-22 18:54:13

回答 2查看 119关注 0票数 0

我试图在Jquery中做一个简单的导航条。我想让文本改变颜色在悬停和当文本被点击保持在悬停颜色。简单地说，我在css中使用悬停没有问题:然后在JQuery中使用function函数。问题是，一切正常工作，直到其中一个项目的导航条被点击。一旦一个导航栏项目被点击:悬停不再工作？我是“好”的css，但非常新的jQuery。我希望这不是一个愚蠢的问题，但是在过去的两个小时里，我一直试图用各种jQuery代码来修复这个问题！代码只会变长，我修复了一个问题，然后创建了另一个问题！如果您检查JSFiddle，您将注意到滚动工作，直到一个被点击！我希望:悬停保持在两个未点击的链接上工作！这是JSFiddle！

非常感谢您的帮助。

守则如下：

<!DOCTYPE html>
<head>
    <title>Help!</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <style type="text/css">
      #wedding-tips, #general-tips, #travel-tips{ cursor: pointer;}
      #wedding-tips:hover, #general-tips:hover, #travel-tips:hover{color: #bc2021;}
    </style>

    <script>
      $(document).ready(function(){
      $("#wedding-tips-container, #travel-tips-container").hide();

      $("#general-tips").click(function(){
      $("#wedding-tips-container,#travel-tips-container").hide('slow');
      $("#general-tips-container").show('slow');
      $("#general-tips").css("color","#bc2021");
      $("#wedding-tips,#travel-tips").css("color","#000");
      });

      $("#wedding-tips").click(function(){
      $("#general-tips-container,#travel-tips-container").hide('slow');
      $("#wedding-tips-container").show('slow');
      $("#wedding-tips").css("color","#bc2021");
      $("#general-tips,#travel-tips").css("color","#000");
      });

      $("#travel-tips").click(function(){
      $("#general-tips-container,#wedding-tips-container").hide('slow');
      $("#travel-tips-container").show('slow');
      $("#travel-tips").css("color","#bc2021");
      $("#wedding-tips,#general-tips").css("color","#000");
      });     
      });
    </script>
</head>

<body>

 <div id="content-selector-div">
    <div id="general-tips">General Photography Tips</div>
    <div id="wedding-tips">Wedding Photography Tips</div>
    <div id="travel-tips">Travel Photography Tips</div>
 </div><br />

<div id="general-tips-container">
    <p>General Tips Here</p>
</div>

<div id="wedding-tips-container">
    <p>Wedding Tips Here</p>
</div>

<div id="travel-tips-container">
    <p>Travel Tips Here</p>
</div>

</body>
</html>

css

rollovers

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-02-22 18:59:22

使用jquery addClass和removeClass函数

$(document).ready(function () {
 $("#wedding-tips-container, #travel-tips-container").hide();

 $("#general-tips").click(function () {
    $("#wedding-tips-container,#travel-tips-container").hide('slow');
    $("#general-tips-container").show('slow');
    $("#general-tips").addClass("active");
    $("#wedding-tips,#travel-tips").removeClass("active");
 });

  $("#wedding-tips").click(function () {
    $("#general-tips-container,#travel-tips-container").hide('slow');
    $("#wedding-tips-container").show('slow');
    $("#wedding-tips").addClass("active");
    $("#general-tips,#travel-tips").removeClass("active");
 });

 $("#travel-tips").click(function () {
    $("#general-tips-container,#wedding-tips-container").hide('slow');
    $("#travel-tips-container").show('slow');
    $("#travel-tips").addClass("active");
    $("#wedding-tips,#general-tips").removeClass("active");
 });
});

http://jsfiddle.net/KAxmS/1/

请参阅使用更少代码的新小提琴http://jsfiddle.net/KAxmS/2/。

票数 1

Stack Overflow用户

发布于 2014-02-22 19:07:23

它不能工作的原因很简单:当您在元素上“手动”设置颜色时，它将比悬停颜色具有更高的“优先级”，并且始终存在：

$("#wedding-tips,#travel-tips").css("color","#000"); --> problem

创建您自己的类(让我们称之为“当前”)，然后当用户单击导航-> http://jsfiddle.net/dmJ8p/时添加/删除

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21958890

复制

相似问题

问jQuery滚动和css :悬停
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery滚动和css :悬停EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery滚动和css :悬停
EN