Question

我的网站有一个横向主菜单。此菜单包含每个菜单项的子菜单。当子菜单的项目悬停时，该项目的类将被添加“悬停”。当添加悬停时，我想要更改div的背景颜色（类'part2'）。

请参阅下面的代码。在这种情况下，我徘徊 item4 ，然后 subitem2 ，当您将项目悬停时，会添加“悬停”。

CODE

<ul class="dj-main">             //main menu
  <li class="item1">...</li>     //main menu items
  <li class="item2">...</li>
  <li class="item3">...</li>
  <li class="item4">

    <div class="submenu">        //dropdown div

      <div class="part1">                       //first half containing submenu
        <ul class="dj-submenu">                 //submenu
          <li class="subitem1">...</li>         //submenu items
          <li class="subitem2 hover">...</li>   //hovered submenu item
        </ul>
      </div>

      // id = part2 added because of the script below
      <div class="part2" id="part2">...</div>     //second half containing color

    </div>
  </li>
</ul>

目前div class = part2没有backgroundcolor。当悬停subitem2时（当它的class = subitem2悬停时），背景颜色必须改变。我试过下面的剧本。

JAVASCRIPT

$('ul.dj-submenu li').each(function(){
    if $(this).hasClass('subitem2 hover'){
        document.getElementById('part2').style.backgroundColor = '#a5a5a5';
    }
});

Answer 1

你可以试试这个

重新阅读了你的问题，我已经调整了一下代码。试试这个

$('.subitem2').hover(function(){
    if($(this).hasClass('hover')){
        $('.part2').css('background-color','#a5a5a5');
    }
});

Answer 2

您只能使用css执行此操作：

ul.dj-submenu >li:hover {
   background:#a5a5a5;
}

Answer 3

这个怎么样：

HTML：

<ul class="dj-main">             //main menu
  <li class="item1">...</li>     //main menu items
  <li class="item2">...</li>
  <li class="item3">...</li>
  <li class="item4">

    <div class="submenu">        //dropdown div

      <div class="part1">                       //first half containing submenu
        <ul class="dj-submenu">                 //submenu
          <li class="subitem1" data-id="1">...</li>         //submenu items
          <li class="subitem2 hover" data-id="2">...</li>   //hovered submenu item
        </ul>
      </div>

      // id = part2 added because of the script below
      <div class="part2" id="part2">...</div>     //second half containing color

    </div>
  </li>
</ul>

使用Javascript：

$('ul.dj-submenu li').each(function(){
var $this = $(this);
    if ($this.hasClass('hover')) {
        $('#part' + $this.data('id')).css('background-color','#a5a5a5');
    }
});

应该诀窍并适用于所有菜单项。如果颜色不是动态的，我宁愿使用纯CSS解决方案。

当列表项的类悬停时更改div的背景颜色

3 个答案: