我點擊它後不能懸停更多的div

我實際上正在嘗試使用CSS和jQuery做菜單。它使用圖像每個按鈕2個圖像，一個用於當它不活動時，另一個用於懸停。這部分是用樣式表製成的。當你點擊一個li時，它就像鼠標結束時一樣。但是一次只能點擊一個li，所以如果你點擊另一個（或者相同的）li，它就會撤消前一個（或者沒有）。這部分是用jquery完成的。我點擊它後不能懸停更多的div

我的問題是，當我點擊一個李，然後取消選擇它，我不能再懸停它。我認爲jQuery應用的CSS和樣式表之間存在衝突。

還有就是HTML部分：

<body> 
<div id="wrap"><!--Header Menu TagBar --> 
    <div id="header"></div> 

    <div id="menu"> 
     <ul> 
      <li id="genre"></li> 

      <li id="author"></li> 

      <li id="home"> 
       <div id="hmIcon"></div> 
      </li> 

      <li id="artist"></li> 

      <li id="year"></li> 
     </ul> 
    </div>

這是CSS部分：

#menu { 
background-color:#fff; 
width:1000px; 
height:60px; 
position:relative; 
} 

#menu ul { 
margin:0; 
padding:0; 
list-style:none; 
overflow: hidden; 
} 

#menu ul li { 
width:200px; 
float:left; 
list-style:none; 
text-align:center; 
height:60px; 
line-height:60px; 
opacity:.9; 
} 

#menu li:hover { 
opacity:1; 
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.6); 
} 

#genre { 
background-image:url(../images/genreHover.jpg); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:200px 60px; 
} 

#genre:hover { 
background-image:url(../images/genre.jpg); 
} 

#author { 
background-image:url(../images/authorHover.jpg); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:200px 60px; 
} 

#author:hover { 
background-image:url(../images/author.jpg); 
} 

#hmIcon { 
width:100%; 
height:100%; 
background-image:url(../images/HomeIcon.png); 
background-position:center center; 
background-size:50px 50px; 
background-repeat:no-repeat; 
} 

#home { 
background-image:url(../images/homeHover.jpg); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:200px 60px; 
} 

#home:hover { 
background-image:url(../images/home.jpg); 
} 

#artist { 
background-image:url(../images/artistHover.jpg); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:200px 60px; 
} 

#artist:hover { 
background-image:url(../images/artist.jpg); 
} 

#year { 
background-image:url(../images/yearContour.jpg); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:200px 60px; 
} 

#year:hover { 
background-image:url(../images/year.jpg); 
}

而最好的最後（頭痛），Jquery的部分：

function clouds(cssDiv, otherOpened) { 
var Div = "#Cloud_" + cssDiv; 
var idButton = "#" + cssDiv; 
var h = "200px"; 
if (otherOpened === null) { 
    var clickedImg = "url(./images/" + cssDiv + ".jpg)"; 
    $(Div).fadeIn(1); 
    $(Div).animate({ 
     height: h, 
    }, 600); 
    $(idButton).css({ 
     'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)', 
     'background-image': clickedImg 
    }); 
    return Div; 
} else { 
    var buttonToUnclick = otherOpened.slice(7); 
    var buttonToClick = cssDiv; 
    var unClickedImg = "url(./images/" + buttonToUnclick + "Hover.jpg)"; 
    $(otherOpened).animate({ 
     height: "0", 
    }, 600); 
    $(otherOpened).fadeOut(1); 
    $("#" + buttonToUnclick).css({ 
     'box-shadow': ' inset 0px 0px 0px rgba(0,0,0,0.45)', 
     'background-image': unClickedImg 
    }); 

    if (Div == otherOpened) { 
     return null; 
    } else { 
     var clickedImg = "url(./images/" + buttonToClick + ".jpg)"; 
     setTimeout(function() { 
      $(Div).fadeIn(1); 
      $(Div).animate({ 
       height: h, 
      }, 600); 
      $("#" + buttonToClick).css({ 
       'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)', 
       'background-image': clickedImg 
      }); 
      console.log(buttonToClick); 
      console.log(clickedImg); 
     }, 800); 
     return Div; 
    } 
} 
}

其電話號碼：

$("#genre").click(function() { 
    whichCloudsOn = clouds("genre", whichCloudsOn); 

}); 
$("#artist").click(function() { 
    whichCloudsOn = clouds("artist", whichCloudsOn); 

}); 
$("#author").click(function() { 
    whichCloudsOn = clouds("author", whichCloudsOn); 

}); 
$("#year").click(function() { 
    whichCloudsOn = clouds("year", whichCloudsOn); 

});

感謝您的幫助，我願意接受任何建議或解決方案。

來源

2014-11-02 Yoshino

如果這是您的實際html，您應該修復缺少的''-tags – 2014-11-02 13:48:26

謝謝，我糾正了這一點，但這不是真的問題。 – Yoshino 2014-11-02 13:53:55

是的，因此只有評論而不是答案。剛剛注意到將代碼複製到小提琴中時，破壞的html可能會導致意外的結果。 – 2014-11-02 13:59:52

jQuery.css()增加了內聯樣式，這將override您的外部CSS。嘗試在你的懸停添加!important，像這樣：

#year:hover { 
    background-image:url(../images/year.jpg) !important; 
}

我做出了表率fiddle。（點擊兩者然後懸停）

來源

2014-11-02 14:15:18

謝謝，我正在考慮重寫樣式表的內聯樣式，但我不知道如何解決它。 – Yoshino 2014-11-02 14:25:04

我點擊它後不能懸停更多的div

回答

相關問題