Hovering Multiple Divs when targeting one - html

Question

Hello Stack Overflow Pros
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.
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>

Answer 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…)