防止CSS:悬停样式传播

Question

在下面的示例中,当我将鼠标悬停在"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,但这似乎是不可能的.

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

在这里工作样本

CSS

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

.list-group-item .remove-item.mouseover {
  background: #aaf;
  cursor: pointer;
}

JavaScript的

  // LIST-ITEM EVENT HANDLERS

  $('.list-group-item').on('mouseenter', function(e){
    $(this).addClass('mouseover');
  }).on('mouseleave', function(e){
    $(this).removeClass('mouseover');
  });

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

  // LIST-ITEM REMOVE BUTTON EVENT HANDLERS

  $('.remove-item').on('mouseenter', function(e){
    $(this).addClass('mouseover');
    $(this).parent().mouseleave();
  }).on('mouseleave', function(e){
    $(this).removeClass('mouseover');
    $(this).parent().mouseenter();
  });

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

Answer 1

仅使用 CSS 是不可能做到这一点的，除了 @Pointy 描述的不太干净的方式。您可以使用 javascript 来完成此操作event.stopPropagation()。因此，您的悬停样式应该成为您在鼠标悬停时切换的类。

这个问题是 css 的重复：hover 仅影响嵌套的顶部 div

Answer 2

好吧，实际上有一个只需要使用 CSS 的解决方案（不需要 HTML 或 JS 的东西）

以下选择器将仅选择悬停时具有“parent”类的元素，这些元素没有悬停在其上的“child”类的子元素。

.parent:has(:not(.child:hover)):hover {}

我在选择器/伪类中看到的唯一问题:has()是浏览器支持（尤其是旧版本） - 因此在使用它之前检查当前的兼容性列表以查看它是否符合您的要求。