保持 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留下了一个未终止的字符串，这可能会导致问题。