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

问题描述：

我想知道如何让div元素的悬停状态与多个div元素保持活动状态。因此，如果我将鼠标悬停在菜单项目1上，然后进入菜单项目6菜单项目1在菜单项目6处于活动状态时处于活动状态，然后我将转到菜单项目9，并且这些菜单项目处于活动状态，因此我之前的菜单项目处于活动状态。保持悬停状态在整个div中保持活动

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(){ 

});

@litteman，在这种情况下，您应该只实现mouseenter，不要对mouseleave执行任何操作。 – kobe 2011-05-01 01:21:29

然后所有的菜单项都会有一个无效的悬停状态 – ONYX 2011-05-01 01:23:26

您能否澄清一下您的问题？当你将鼠标悬停在某个东西上时，我不遵循你想要发生的事情，然后弹出鼠标。你一次只想要*一个元素被认为是“活跃”的吗？如果是这样，你可能会发现简单地使用无序列表和CSS，而不是JavaScript。 – 2011-05-01 01:30:52

答

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

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

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

我不认为这会做什么，我awant我会有一个mouseleave事件，以及执行非活动状态 – ONYX 2011-05-01 01:27:17

你不需要一个mouseleave，就像你悬停在同一组中的菜单项，它将自动停用同一组中的所有其他组件以及选择当前组件。如果你做鼠标离开，只要你的鼠标离开，没有任何东西会保持活动，这是我认为你不想做的事情。 – DarthJDG 2011-05-01 01:30:32

@littleman，你能描述一下你的活动状态是什么意思，你想以不同的颜色表现出来吗？ – kobe 2011-05-01 01:31:03

答

您可能想关闭一些类容器，因为它没有关闭。无论如何，mouseenter实际上并不实际，因为div会跨越100％，当你向下移动时，它们中的每一个都会变得活跃。

假设你设置的CSS活跃的风格只是改变其属性为“主动”或者我会建议改变“项目” 它上面点击事件

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

下面是一个例子http://jsfiddle.net/robx/RsNw3/

对于这些类型的菜单，最好使用UL或OL ...列出 – kobe 2011-05-01 01:35:09

如果你坚持使用mouseenter，在我看来你需要缩小div的宽度，或者让用户在列表中的所有div元素上移动时将其全部激活。 – robx 2011-05-01 01:35:55

Yah，但他没有把它放进去，所以我只给他他用他的代码所要求的;） – robx 2011-05-01 01:36:21

答

你可以试试这个：

$('.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留下一个未终止的字符串，这可能会导致问题本身。

答

可以在纯CSS（3）做到这一点：http://jsfiddle.net/rudiedirkx/W8McN

我加入-webkit-和-moz-供应商前缀，因为（非标准）转换所必需的这一点。

这一定是我最酷的CSS jsFiddle！ =） – Rudie 2011-05-01 02:38:36

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

相关推荐