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

【问题标题】：Change backgroundcolor of div when class of list item is hover列表项类悬停时更改 div 的背景颜色
【发布时间】：2014-04-07 09:52:07
【问题描述】：

我的网站有一个水平主菜单。此菜单对每个菜单项都有一个子菜单。当子菜单的一个项目悬停时，该项目的类将添加“悬停”。添加悬停时，我希望 div (class 'part2') 的背景颜色发生变化。

网站：europebathroom.com

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

代码

<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 没有背景色。当悬停 subitem2 时（当它的 class= subitem2 悬停时），背景颜色必须改变。我试过下面的脚本。

JAVASCRIPT

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

【问题讨论】：

你可以用 CSS 做到这一点！
div 'part2' 与子菜单 ul li 无关。那么如何通过在 CSS 中悬停 li 'subitem2 hover' 来更改 'part2' 的背景色？

标签： javascript jquery menu background hover

【解决方案1】：

你可以试试这个

重新阅读您的问题后，我对代码进行了一些调整。试试这个

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

【讨论】：

【解决方案2】：

你只能用 css 来做：

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

【讨论】：

我想改变下拉 div（子菜单）的“part2”，而不是 ul =(

【解决方案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 解决方案。

【讨论】：