时间戳

首页 > 解决方案 > 悬停时带有图像的菜单

javascript - 悬停时带有图像的菜单

问题描述

我正在创建一个菜单，其中基于悬停的项目在悬停时显示图像，设法实现显示和隐藏部分，但需要实现一些我似乎无法获得的其他内容：

  1. 悬停在子菜单项上时，隐藏主菜单图像
  2. 当悬停在没有图像的子菜单项上时，显示该部分的主菜单图像。

我有以下代码以及这里的codepen https://codepen.io/cr8tivly/pen/LYpXVGx

谢谢

HTML

<div class="container mx-auto position-relative">
  <ul class="main-menu col-6">
    <li class="nav-item parent-menu border">
      <a class="" href="">menu-1</a>
      <div class="parent-image">
        <img class="main-image" src="http://placehold.it/150/f91?text=Parent-1" alt="" />
      </div>
      <ul class="child-menu">
        <li class="nav-item">
          <a href="">smenu-1</a>
          <div class="child-image">
            <img class="" src="http://placehold.it/100/ggd" alt="" />
          </div>
        </li>

        <li class="nav-item">
          <a href="">smenu-2</a>
          <div class="child-image">
            <img class="" src="http://placehold.it/100/cdd" alt="" />
          </div>
        </li>
        <li class="nav-item">
          <a href="">smenu-3</a>
          <div class="child-image"></div>
        </li>
      </ul>
    </li>
    <li class="nav-item parent-menu">
      <a href="">menu-2</a>
      <div class="parent-image">
        <img class="main-image" src="http://placehold.it/150/green?text=Parent-2" alt="" />
      </div>
      <ul class="child-menu">
        <li class="nav-item">
          <a href="">smenu-1</a>
          <div class="child-image">
            <img class="" src="http://placehold.it/100/e00" alt="" />
          </div>
        </li>
        <li class="nav-item">
          <a href="">smenu-2</a>
          <div class="child-image">
            <img class="" src="http://placehold.it/100/dbb" alt="" />
          </div>
        </li>
        <li class="nav-item">
          <a href="">smenu-3</a>
          <div class="child-image"></div>
        </li>
      </ul>
    </li>
  </ul>
</div>

JS/jQuery

$('.parent-image').hide();
$('.parent-menu').hover(
  function(){
  $(this).find('.parent-image').show();
  },
  function() {
    $(this).find('.parent-image').last().hide();
  }
);

$('.child-image').hide();
$('.child-menu .nav-item').hover(
  function(){
  $(this).find('.child-image').show();
   $(this).find('.child-image:empty', function(){
   $('.parent-image').show();
   })

  },
  function() {
    $(this).find('.child-image').last().hide();
  }
);

CSS

.parent-image,
.child-image {
  position: absolute;
  right: 0;
  top: 0;
}`

标签： javascripthtmljquerycss

解决方案

试试下面的代码：

$('.parent-image').hide();
$('.parent-menu').hover(
  function(){
  $(this).find('.parent-image').show();
  },
  function() {
    $(this).find('.parent-image').last().hide();
  }
);

$('.child-image').hide();
$('.child-menu .nav-item').hover(
  function(){
  $(this).find('.child-image').show();
  $(this).closest('.parent-menu').find('.parent-image').hide();   

  let childImage = $(this).find('.child-image img');
  console.log(childImage.length);
   if(childImage.length==0) {
     $(this).closest('.parent-menu').find('.parent-image').show(); 
   }
    else {
      $(this).closest('.parent-menu').find('.parent-image').hide(); 
    }
/*  $(this).find('.child-image:empty', function(){
    $('.parent-image').show();
   }) */

  },
  function() {
    $(this).find('.child-image').last().hide();
  }
);

推荐阅读