Question

如何在以下情况下使用事件.stopPropagation（）（或其他内容）。我有一个带子菜单的标准菜单。在子菜单背景中，我有背景图像，我需要覆盖在父级上添加pseuso-element（背景：绿色）。因为使用jquery我无法控制css伪元素（我需要控制不透明度），我将另一个类添加到我的父级。一切都按照我的需要工作，但在父级上添加/删除类会使图像背景闪烁。

jsfiddle

my site live (top menu is my problem)

HTML:
<ul class="top-menu">
 <li>
  <a href="#">link 1</a>
  <div class="submenu">
   <ul>
    <li><a href="#">sublink 1</a></li>
    <li><a href="#">sublink 2</a></li>
    <li><a href="#">sublink 3</a></li>
    <li><a href="#">sublink 4</a></li>
    <li><a href="#">sublink 5</a></li>
   </ul>
  </div>
 </li>
 <li><a href="#">link 2</a></li>
 <li><a href="#">link 3</a></li>
</ul>

jquery的

            $(".submenu a").mouseover(function(e){
              $(".submenu").addClass("myclass");
            }).mouseout(function(e){
              var cover = $(".submenu");
              cover.data('timer', setTimeout(function(){
                    cover.removeClass("myclass");
                }, 2000)
              );
              e.stopPropagation();
            });

CSS

*{
  box-sizing:border-box;
}
ul.top-menu {
  display:flex;
  list-style:none;
  text-transform:uppercase;
  width:100%;
  justify-content:center;
  background:white;
  position:relative;
}
ul.top-menu li a {
  color:black;
  padding:10px;
  text-decoration:none;
  display:block;
}
.submenu {
  position:absolute;
  background:red url("http://www.metalclays.com/content/images/thumbs/0002871_texture-tile-fireworks_100.jpeg");
  background-position:right top;
  background-size:200px auto;
  background-repeat:no-repeat;
  width:100%;
  top:100%;
  left:0;
  z-index:0;
}
.submenu:after {
  content:"";
  background:green;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  z-index:-1;
}  
.submenu.myclass:after {
  opacity:1;
}
.submenu ul {
  list-style:none;
}
.submenu a {
  color:white;
  display:block;
}

Answer 1

你试过这个吗？

$(".submenu a").mouseover(function(e){
  $(".submenu").addClass("myclass");
}).mouseout(function(e){
  e.preventDefault();
  $(".submenu").removeClass("myclass");
});

Answer 2

但在父级上添加/删除类会使图像背景闪烁

这是因为在鼠标悬停上添加并添加了该类。改变自：

$(".submenu a").mouseover(function(e){
    $(".submenu").addClass("myclass");
})

为：

$(".submenu a").mouseover(function(e){
    if ($(".submenu.myclass").length == 0) {
        $(".submenu").addClass("myclass");
    }
})

updated fiddle。

jquery在悬停菜单上使用.stopPropagation（）

2 个答案: