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

Hello Stack Overflow Pros

Hello Stack溢出优点

Id like to hover multiple divs when i hover the image. There is a nav bar on top of different images, when i hover the image i want to trigger the navigation above.

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

Here some code:

这里有一些代码:

You can see that the nav is underlined. I want it to trigger, when i clicking on the image.

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

Thanks a lot for your help!

非常感谢你的帮助!

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

1 个解决方案

#1

You could combine the required elements for each menu item in the link.

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

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

Now, if you set an :hover definition to the link, it will work if you mouse over the link text or the image. You also shouldn't repeat all the main navigation links (they will be read twice by assistive technologies and search engine bots…)

现在,如果您将:hover定义设置为链接,则将鼠标悬停在链接文本或图像上时,它将起作用。您也不应该重复所有主要导航链接(它们将由辅助技术和搜索引擎机器人读取两次......)