当悬停另一个 <li> 时更改一个 <li> 的背景答案

【问题标题】：Change background of one <li> when hover another <li>当悬停另一个 <li> 时更改一个 <li> 的背景
【发布时间】：2016-05-12 14:48:30
【问题描述】：

我有一个问题（我没有足够的知识来做到这一点 - 这是真正的问题）：我在网站中有一个下拉菜单： [SCREENSHOT]

我希望，当我在最后一个项目列表中时，第一个列表上的图标会改变背景颜色。

这是解释的代码

<!-- "Product" menu, (you can see it in the screenshot) is inside a li:-->

 <li><a href="#">Product</a></li>

 <!-- Then there are the sub menu: -->

 <li><a href="#">Product</a>
   <ul>
     <li><a href="#"><img src="icon1.png">sub1</a></li>
     <li><a href="#"><img src="icon1.png">sub2</a></li>
     <li><a href="#"><img src="icon1.png">sub3</a></li>
     <li><a href="#"><img src="icon1.png">sub4</a></li>
  </ul>
</li>

 <li><a href="#">Product</a>
   <ul>
     <li><a href="#"><img src="icon1.png">sub1</a>
       <ul>
         <li>
         <a href="page.html">SUBOFSUB!!!!!</a>
         </li>
       </ul>
     </li>
     <li><a href="#"><img src="icon1.png">sub2</a></li>
     <li><a href="#"><img src="icon1.png">sub3</a></li>
     <li><a href="#"><img src="icon1.png">sub4</a></li>
  </ul>
</li>

每次我悬停“SUBOFSUB!!”时，我都想更改“sub1,sub2,sub3,sub4”的 img 的背景菜单

【问题讨论】：

我很困惑，你能更好地解释一下吗？并显示这段代码的jsfiddle？谢谢你
你需要某种脚本来做到这一点，这不能只用 CSS...
@patrick 我更新了帖子

标签： javascript jquery html css

【解决方案1】：

由于“SUBOFSUB”是“sub1”的后代，您可以通过将所需样式应用于“sub1”元素的:hover 伪类来实现您想要的效果，如下所示：

/* HOUSEKEEPING */
*{box-sizing:border-box;font-family:sans-serif;list-style:none;margin:0;padding:0;}
/* IMPORTANT STUFF */
#menu>li:hover>img{
  background:#fff;
}
/* STYLING */
#menu{color:#fff;line-height:1.5em;width:50%;}
#menu>li{background:#000;margin:1px 5px;padding:0 5px;position:relative;}
#menu img{border:1px solid;height:1em;margin:.25em 5px .25em 0;transition:background .5s;vertical-align:top;width:1em;}
#menu ul{background:#fff;left:90%;position:absolute;top:5px;width:100%;}
#menu ul li{background:#666;margin:1px;padding:0 5px;}

<ul id="menu">
  <li><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">Menu 1
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
</ul>

【讨论】：