如何在导航栏中制作图像悬停

Question

我正在尝试学习如何将图像悬停在图像上 导航栏
我的目标是让div-image “pic-index”成为 通过将鼠标悬停在导航栏中的“HOME”链接上并使div成为 通过悬停变成另一个图像 我真的不知道 我怎么能这样做。
这是我的 HTML ：

我在问题中添加了一个片段，因此您可以在我的代码中看到我当前的内容

     
        
    
    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"><a href="#">צור קשר</a> <ul>
    
    </ul> </li> <li class="services"><a href="#">שירותים</a> <ul> <li><a href="#">Tutorial #1@@</a></li> <li><a href="#">Tutorial #2</a></li> <li><a href="#">Tutorial #3</a></li> </ul> </li>
         <li class="about"><a href="#">אודות</a>
    
    </li> <li class="home"><a href="#">דף הבית</a></li>
        </ul> </ul> </div>

   

Answer 1

一旦你的.home位于.pic-index之后，你只能通过一些JS或jQuery实现这一点，这里是jQuery的解决方案。 如果.pic-index出现在.home之前，那么您将只能使用CSS，但事实并非如此。

（我添加了一个代表效果的图片，在FULLSCREEN中运行代码段以更好地显示）

修改
另一件事，我在css中做了一个小的更新，但是你要保留它或者没有（将imss添加到img类中）。 此外，您在列表中有一些HTML结构错误，一些ul和li在错误的位置开始和结束

＆＃13;

＆＃13;

/* 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'
    );
  });
  
});

＆＃13;

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

＆＃13;

<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"><a href="#">צור קשר</a>
        <ul>
     </li>
    </ul>  
    <li class="services"><a href="#">שירותים</a>
    <ul> 
      <li><a href="#">Tutorial #1@@</a></li>
      <li><a href="#">Tutorial #2</a></li>
      <li><a href="#">Tutorial #3</a></li> 
    </ul> 
    </li>
         <li class="about"><a href="#">אודות</a></li>
         <li class="home"><a href="#">דף הבית</a></li>
      </ul>       
  </div>

＆＃13;

＆＃13;

＆＃13;