在我的地盤我有一個具有某些功能和動畫菜單激活菜單：否認通過點擊它周圍

在鼠標滑過有一個爲除了一個是菜單中的所有元素不透明度的變化在上面徘徊。
單擊某個元素時，會標記其顏色並減少未點擊元素的不透明度。
單擊元素時，菜單向左移動（已解決）
單擊某個元素時，滑塊會淡入。（已解決）

現在所有這些功能都工作得很好，但問題是，它們可以通過點擊菜單上方和上方，而不是僅在元素上激活。是否可以固定，以便只需單擊菜單中的某個元素即可激活所有功能（不更改它們）？

的jsfiddle：https://jsfiddle.net/atkumqpk/1/

菜單的HTML：

<div id="menu" class="menu"> 
    <ul class="headlines"> 
     <li id="item1"> 
      <button>aaaaaaaa</button> 
     </li> 
     <li id="item2"> 
      <button>bbbbbbb</button> 
     </li> 
     <li id="item3"> 
      <button>ccccccc</button> 
     </li> 
     <li id="item4"> 
      <button>dddddddd</button> 
     </li> 
     <li id="item5"> 
      <button>eeeeeee eee.</button> 
     </li> 
     <li id="item6"> 
      <button>ffffff</button> 
     </li> 
     <li id="item7"> 
      <button>ggggggg</button> 
     </li> 
    </ul> 
</div>

來源

2015-07-03 mikeb

這是一個CSS問題。如果你在DOMInspector中檢查你的'li'元素，你會發現它們很大。滑到左邊後，你只需要縮小它們。 –

它是否已開始在Chrome上運行？ [這]（http://stackoverflow.com/q/31206604/4365626）？ –

@VibhorDube no ...只有在我重新調整大小後，但它與菜單激活問題無關，我從開始 – mikeb

在你的JS有一個函數：

$(".menu").on("click", function() { 
    $(".menu").addClass('permahover'); 

});

更改活化劑.menu button：

$(".menu button").on("click", function() { 
    $(".menu").addClass('permahover'); 

});

更新

我建議花點時間閱讀常見的CSS方法。同樣適用於您使用JQuery。

查看更新fiddle。做了一些改變，但長話短說，無論你在你的<li>標籤上應用一些風格/動畫/動作，這應該是他們的<button>兒童。

再仔細看看這裏的CSS變化：

.headlines:hover li button, .headlines.active li button 
.headlines button:hover, .headlines li button.active

來源

2015-07-03 13:28:42

這個解決方案解決了淡入/淡出和左側的動畫。但是，如何將其應用於懸停以及不透明度的變化，上面提到的另外兩個函數 – mikeb

希望這有助於。 .. –

這是相當不完善的解決方案，但它是一個開始。總體而言，CSS可以更好地處理。您可以在fiddle中查看。

.menu li { 
position: relative; 
/*top: 180px; 
left: 0px;*/ 
} 
.headlines li { 
width:auto;margin-left: 0 !important 
}

懸停實例和點擊函數應該觸發另一個div出現在'li塊'或按鈕本身上。

來源

2015-07-03 14:54:25 chixieburr

但動畫向左移動怎麼樣？ – mikeb

否認通過點擊它周圍

回答

更新

相關問題