Question

我想知道如何使div元素的悬停状态在多个div元素中保持活动状态。因此，如果我将鼠标悬停在菜单项1上，则转到菜单项目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

假设您为悬停效果定义了selected类：

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

siblings()函数将仅在当前元素的父元素中选择菜单项。

Answer 2

你可能想关闭其中一些类容器，因为它未被封闭。无论如何，mouseenter似乎并不实用，因为div会超过100％，当你向下移动时，它们中的每一个都会变得活跃。

假设您在css中设置了活动样式，只需将其属性更改为“active”或“item” 我建议将其更改为点击事件

$('.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 Fiddle demo

顺便提一下，请注意你引用的属性值，class="container留下一个未被终止的字符串，这可能会导致所有问题。

保持悬停状态在div中保持活动状态

4 个答案: