Question

Hello Stack Overflow Pros

我喜欢在我悬停图片时悬停多个div。当我悬停时，在不同的图像上面有一个导航栏图像我想触发上面的导航。

这里有一些代码：

您可以看到导航带有下划线。当我点击图片时，我想让它触发。

非常感谢你的帮助！

＆＃13;

#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;


}

＆＃13;

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

＆＃13;

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定义，则将鼠标悬停在链接文本或图像上时，它将起作用。您也不应该重复所有主要导航链接（它们将由辅助技术和搜索引擎机器人读取两次......）

在定位一个时将鼠标悬停在多个Div上

1 个答案: