Question

当鼠标位于下拉区域时，尝试保持导航项目亮起。但是当鼠标离开时，父级仍然会悬停背景值。

基本的HTML将是

<div class="mainnav">
  <ul>
    <li>
      <ul>
      </ul>
    </li>
  </ul>
</div>

和我的jquery代码

$(".main-nav ul li ul").each(function(){
    var bgcolor = "{{settings.main_navi_clr3}}";
    $(this).hover(function(){

      $(this).parent().css('background-color',bgcolor);
      $(this).parent().find('a').css('color','#fff');
      $(this).find('a').css('color',bgcolor);
    });
});

Answer 1

考虑使用addClass和removeClass。

的jQuery

$(".main-nav ul li ul").each(function() {
    $(this).mouseover(function() {
        $(this).parent().addClass('hover');
    });
    $(this).mouseout(function() {
        $(this).parent().removeClass('hover');
    });
);

CSS

.main-nav ul li.hover {
    background-color: #000; /* bgcolor */
}

.main-nav ul li.hover a {
    color: #fff;
}

.main-nav ul li.hover ul a {
    color: #000; /* bgcolor */
}

取消鼠标离开时的悬停操作

1 个答案: