保持 hover state 在 div 中處於活動狀態

Question

我想知道您如何在多個 div 元素中保持 div 元素的 hover state 處於活動狀態。 因此，如果我在菜單項 1 上使用 hover 然后 go 到菜單項 6 菜單項 1 處於活動狀態，而菜單項 6 處於活動狀態，那么我將轉到菜單項 9 並且那是活動的，因此我以前的菜單項處於活動狀態。

CSS：

.menuitem-active {
     background-color: #ff9900;
}
.menuitem {
     background-color: #ffffff;
}

HTML：

<div class="container">
    <div class="menu">
        <div class="menu-item">Menu Item 1</div>
        <div class="menu-item">Menu Item 2</div>
        <div class="menu-item">Menu Item 3</div>
        <div class="menu-item">Menu Item 4</div>
    </div>
</div>
<div class="container">
    <div class="menu">
        <div class="menu-item">Menu Item 5</div>
        <div class="menu-item">Menu Item 6</div>
        <div class="menu-item">Menu Item 7</div>
        <div class="menu-item">Menu Item 8</div>
    </div>
</div>
<div class="container">
    <div class="menu">
        <div class="menu-item">Menu Item 9</div>
        <div class="menu-item">Menu Item 10</div>
        <div class="menu-item">Menu Item 11</div>
        <div class="menu-item">Menu Item 12</div>
    </div>
</div>

Javascript：

$('.container .menu .menu-item').mouseenter(function(){

});

Answer 1

假設您為 hover 效果定義了一個selected的 class：

$('.container .menu .menu-item').mouseenter(function() {
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
});

siblings() function 將 select 菜單項僅在當前元素的父級中。

Answer 2

您可能想要關閉其中一些 class 容器，因為它未關閉。 無論如何，mouseenter 似乎並不實用，因為 div 將跨越 100%，並且當您向下移動時，它們中的每一個都會變得活躍。

假設您在 css 中設置了一個活動樣式，只需將其屬性更改為“活動”或“項目”我建議將其更改為點擊事件

$('.container .menu .menu-item').click(function() {
    $(this).attr("class","menu-active");
});

這是一個示例http://jsfiddle.net/robx/RsNw3/

Answer 3

您可以在純 CSS(3) 中執行此操作： http://jsfiddle.net/rudiedirkx/W8McN

我添加了-webkit-和-moz-供應商前綴，因為為此需要（非標准化）轉換。

Answer 4

你可以試試這個：

$('.container > .menu > .menu-item').hover(

function() { // first function, the 'mouseenter'
    $(this).addClass('active');
},
function() { // the second function, the 'mouseleave'
    $(this).removeClass('active')
});

JS 小提琴演示。

順便說一句，請注意您對屬性值的引用， class="container留下了一個未終止的字符串，這可能會導致問題。