Question

我有一个问题（我没有知道这样做 - 这是真正的问题）：我在网站上有一个下拉菜单： [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 !!”时改变img“sub1，sub2，sub3，sub4”的背景菜单

Answer 1

As＆＃34; SUBOFSUB＆＃34;是＆＃34; sub1＆＃34;的后代，你可以通过将你想要的样式应用到＆＃34; sub1＆＃34;的:hover伪类来实现你想要的。元素，如：

＆＃13;

/* 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;}

＆＃13;

<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>

＆＃13;

当悬停在另一个<li>时，更改一个<li>的背景</li> <li>

1 个答案: