How can i make an image in navbar be affcted on hover - html

Question

i am trying to learn how to make hover on image in
navbar
my goal is to make the div-image "pic-index" to be
affcted by hover on "HOME" link in navbar and make the div to be
changed into another image by hover .
i really dont have any idea
how i can do such thing .
here is my HTML :
I added an snippet to my question, so you can see what I current have in my code
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:absolute;margin-left:936px;margin-top:62px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav"> <ul class="mainul"> <ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="images/nav-home-normal.png"></div> <li class="contact">צור קשר <ul>
</ul> </li> <li class="services">שירותים <ul> <li>Tutorial #1##</li> <li>Tutorial #2</li> <li>Tutorial #3</li> </ul> </li>
<li class="about">אודות
</li> <li class="home">דף הבית</li>
</ul> </ul> </div>

Answer 1

Once your .home is after the .pic-index you only can achieve that with some JS or jQuery, here's a solution with jQuery.
If .pic-index comes before .home, then you would be able to use only CSS, but it's not the case.
(I Added an image just to represent the effect, run the snippet in FULLSCREEN to better visualization)
EDIT
Another thing, I made a small update in the css, but it's up for you to keep it or no (added css to img class).
ALSO, you have some HTML structure errors in the lists, some ul and li starts and ends on wrong places
/* HOVER */
$(function() {
$('.home').mouseenter(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png'
);
});
$('.home').mouseleave(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png'
);
});
});
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:relative;
top:30%;
float: right;
margin-right: 50px;
}
.pic-index img{
max-width: 48px;
max-height: 48px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav"> <ul class="mainul">
<ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png"></div>
<li class="contact">צור קשר
<ul>
</li>
</ul>
<li class="services">שירותים
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about">אודות</li>
<li class="home">דף הבית</li>
</ul>
</div>