实现目标

停留在当前页面，当前a有效果，同时鼠标移动其他a，当前a效果移除，移上去的a显示效果，鼠标移出，效果还原在当前a。笑脸展开效果见上一篇文章。

停留在 Home 页的初始效果

停留在 Home 页上，鼠标移动到 Brand 上

停留在 Home 页上，鼠标从 Brand 移开

实现思路

代码实现

结构

<div class="tips">
  <ul>
    <li><a href="index.html">Home</a>
        <div class="smile smile-active"><img src="static/images/smile.png" alt=""></div>
    </li>
    <li><a href="brand.html">Brand</a>
        <div class="smile"><img src="static/images/smile.png" alt=""></div>
    </li>
    <li><a href="products.html">Products</a>
      <div class="smile"><img src="static/images/smile.png" alt=""></div>
    </li>
    <li><a href="company.html">About Us</a>
      <div class="smile"><img src="static/images/smile.png" alt=""></div>
    </li>
    <li><a href="news.html">Social Media</a>
      <div class="smile"><img src="static/images/smile.png" alt=""></div>
    </li>
    <li><a href="contact.html">Get In Touch</a>
      <div class="smile"><img src="static/images/smile.png" alt=""></div>
    </li>
    <li class="search">
      <a href="#">
        <img src="static/images/search.png" alt="" />
      </a>
    </li>
  </ul>
</div>

样式

a {
  cursor: pointer;
  text-decoration: none;
  color: white;
}

header .tips ul .smile{
  width: fit-content;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  transition: 1s;
}

header .tips ul .smile-active{
  transform: translateX(-50%) scale(1);
}

header .tips ul li:hover .smile{
  transform: translateX(-50%) scale(1);
}

控制

$('header .tips ul li').hover(function() {
    $(this).children().css('transform','translateX(-50%) scale(1)')
    $(this).siblings().children().css('transform','translateX(-50%) scale(0)')
},function(){
    $('header .tips ul li .smile').css('transform','translateX(-50%) scale(0)')
    $('header .tips ul li .smile-active').css('transform','translateX(-50%) scale(1)')
})