html - 定位一个时悬停多个 Div

Question

你好 Stack Overflow 专家

我想在悬停图像时悬停多个 div。 当我将鼠标悬停在 图片我想触发上面的导航。

这里是一些代码:

您可以看到导航带有下划线。我希望它在我单击图像时触发。

非常感谢您的帮助!

#nav_start_container {

	float:left;
	position:relative;
	margin-left:60px;


}

#nav_start_container ul li {
    min-width:136px;
	float:left;
	position:relative;
	margin:0;

}


.nav_start  { 

    min-width:136px;
	display: inline-block;
	color: #495d7f;
	text-decoration: none;
	font-size: 15px;
	font-weight: 550;
	margin-bottom:20px;
	text-align:center;
}

.nav_start:hover {
    
	text-decoration: underline;
	background: #fff !important;
	color: #495d7f;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;

}

#current {
text-decoration: underline !important;
	background: #fff !important;
	color: #495d7f !important;
	
}

.bannerbild {
margin:0;
}


.bannerbild:hover {

padding-top:7px;
position:absolute;


}

	<div id="nav_start_container">
	<ul id="nav">
	
	 <li>
        <a href="portrait.html">
              <span class="nav_start">test2</span>
              <img src="images/1a.jpg" alt="…" class="bannerbild" />
        </a>
     </li>
		 <li>
        <a href="portrait.html">
              <span class="nav_start">test2</span>
              <img src="images/1b.jpg" alt="…" class="bannerbild" />
        </a>
     </li>
	 	 <li>
        <a href="portrait.html">
              <span class="nav_start">test2</span>
              <img src="images/1c.jpg" alt="…" class="bannerbild" />
        </a>
     </li>
	  	 <li>
        <a href="portrait.html">
              <span class="nav_start">test2</span>
              <img src="images/1d.jpg" alt="…" class="bannerbild" />
        </a>
     </li>
	  	 <li>
        <a href="portrait.html">
              <span class="nav_start">test2</span>
              <img src="images/1e.jpg" alt="…" class="bannerbild" />
        </a>
     </li>
	  	 <li>
        <a href="portrait.html">
              <span class="nav_start">test2</span>
              <img src="images/1f.jpg" alt="…" class="bannerbild" />
        </a>
     </li>
	
	 
		
	</ul>



		
				<div class="clear"></div>	
</div> 
		
		
	
   

Answer 1

您可以为链接中的每个菜单项组合所需的元素。

  <li>
        <a href="test2.html">
              <span class="link-text">test2</span>
              <img src="images/1b.jpg" alt="…" class="banner-image" />
        </a>
  </li>

现在，如果您为链接设置一个 :hover 定义，那么当您将鼠标悬停在链接文本或图像上时它就会起作用。您也不应重复所有主要导航链接(它们将被辅助技术和搜索引擎机器人阅读两次……)