jQuery滾動和CSS：hover

Question

我正在嘗試在Jquery中制作一個簡單的導航欄。 我想讓文本在懸停時以及在單擊文本以保持懸停顏色時更改顏色。 確實很簡單，我已經在css中使用hover做到了這一點，然后在JQuery中使用了on click函數。 問題是，在單擊導航欄的任何一項之前，一切正常。 單擊導航欄項目后，：hover不再起作用？ 我對CSS非常滿意，但對jQuery非常陌生。 我希望這不是一個愚蠢的問題，但是在過去的2個小時中，我嘗試使用各種jQuery代碼修復此問題！ 代碼變得更長，我解決了1個問題，但又創建了另一個！ 如果您檢查JSFiddle，您會注意到，直到單擊一次，翻轉才起作用！ 我希望：hover繼續在2個未單擊的鏈接上工作！ 這是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>

Answer 1

它不起作用的原因非常簡單：當您在元素上“手動”設置顏色時，它的“優先級”高於懸停顏色，並且將始終存在：

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

創建自己的類（我們稱其為“當前”類），然后在用戶單擊導航時添加/刪除-> http://jsfiddle.net/dmJ8p/

Answer 2

使用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/

jQuery滾動和CSS：hover

問題描述

2 個解決方案

解決方案1
3 2014-02-22 19:07:23

解決方案2
1 已采納 2014-02-22 18:59:22

jQuery滾動和CSS：hover

問題描述

2 個解決方案

解決方案1 3 2014-02-22 19:07:23

解決方案2 1 已采納 2014-02-22 18:59:22

解決方案1
3 2014-02-22 19:07:23

解決方案2
1 已采納 2014-02-22 18:59:22