相关疑难解决方法(0)

在css中,如何:hover在子事件悬停时停止在父元素中触发事件,以便仅在父元素悬停时才会触发它？在这种情况下,我的子元素实际上位于它的父元素之外,具有绝对定位,所以当父元素悬停时父元素发生变化时有点奇怪.

我做了一个JSFiddle来说明问题.

这是我的例子中使用过的解决方案的JSFiddle.

在下面的示例中,当我将鼠标悬停在"X"按钮上时,列表项hover样式也会启用,我不希望这种情况发生.

hover按钮上的hover样式是否可以独立于样式list-group-item？像防止"悬停"传播的东西？

有没有其他方法可以实现这一目标？也许以不同的方式组装所有这些HTML/CSS/JS？

在这里工作样本

<ul class="list-group">
  <li class="list-group-item">
    Lalalalaiaia
                <button class="btn btn-default btn-xs pull-right remove-item">
      <span class="glyphicon glyphicon-remove"></span>
    </button>
  </li>
  <li class="list-group-item">
    Panananannaeue 
                <button class="btn btn-default btn-xs pull-right remove-item">
      <span class="glyphicon glyphicon-remove"></span>
    </button>
  </li>
</ul>

CSS

.list-group-item:hover {
  background: #fafafa;
  cursor: pointer;
}

JavaScript的

  $('.list-group-item').on('click', function(){
    console.log('clicked item');
  });

  $('.remove-item').on('click', function(e){
    console.log('clicked remove-item btn');
    e.stopPropagation();
  });

UPDATE

问题似乎是当鼠标悬停在内部X按钮上时,鼠标实际上没有离开'list-group-item'元素,因此,它保持悬停状态.

我能够通过手动调度来解决它mouseenter,并mouseleave在在"列表中基团的项目" mouseleave和mouseenter所述"删除项目"按钮,分别的事件,而无需使用"event.stopPropagation()"(除按钮单击处理程序).

缺点是我需要一个mouseenter和mouseleave两个元素的事件处理程序.我最好只使用CSS,但这似乎是不可能的.

我不确定这是否是一个干净的解决方案,你怎么看？ …

我现在已经获得了基本的,普通的菜单树,如下所示:

<ul id="nav">
  <li>
    <a href="#">home</a>
    <div class="controls">Some controls go here</div>
    <ul>
      <li>
        <a href="#">item 1</a>
        <div class="controls">Some controls go here</div>
      </li>
      <li>
        <a href="#">item 2</a>
        <div class="controls">Some controls go here</div>
      </li>
    </ul>
  </li>
</ul>

具有"控件"类的div被隐藏起来.我想要发生的是,当你将鼠标悬停在li上时,各个li显示的控件(当你移开鼠标时,它们会再次隐藏).当您将鼠标悬停在其中一个嵌套的li上时会出现问题,它也会显示它的父控件.这是我正在使用的jQuery:

    $("#nav li").hover(
        function() {
            $(".controls:first", this).css("display", "block");
        },
        function() {
            $(".controls:first", this).css("display", "none");
        }
    );

谢谢你的帮助.雷米