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();
  });

更新

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

我能够通过在'{1}}中的'{1}}和mouseenter事件中的'list-group-item'上手动调度mouseleave和mouseleave来解决此问题-item'按钮，分别不需要使用'event.stopPropagation（）'（按钮点击处理程序除外）。

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

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

Working sample here

CSS

mouseleave

的JavaScript

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

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

Answer 1

除了@Pointy描述的不那么干净的方式之外，这对CSS来说是不可能的。您可以使用event.stopPropagation()使用javascript执行此操作。因此，您的悬停样式应该成为您在鼠标悬停时切换的类。

此问题与css :hover only affect top div of nest

重复

Answer 2

你可以像Pointy建议的那样做出否定，但是一个更可靠的解决方案是增加一个额外的节点。这个想法是行和按钮成为适当的兄弟，因为你不能设置TextNode的样式。

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

现在你可以做到：

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

您需要一些额外的技巧才能将按钮放在正确的位置，例如：

// untested
.list-group-item {
  position: relative;
}
.list-group-item button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Answer 3

我找不到一个适用于所有情况的答案，并且也很容易实现。遗憾的是，似乎没有一致的解决方案纯粹是CSS和/或需要特殊的HTML安排。

这是一个似乎适用于所有情况的jQuery解决方案。

.ui-hoverable的任何元素都会收到一个不传播的.ui-hover类。因此，您可以堆叠.ui-hoverable元素，只有鼠标下方的最顶层才会有.ui-hover类。

$('.ui-hoverable').each(function() {
    var el = $(this);
    el.on('mousemove', function () {
        var parent = $(event.target).closest('.ui-hoverable');
        if(parent.length && parent[0] == el[0]) {
           el.addClass('ui-hover');
           return;
        }
        el.removeClass('ui-hover');
    });
    el.on('mouseleave', function () {
        el.removeClass('ui-hover');
    });
});

这是有效的，因为mousemove事件会搜索最接近的.ui-hoverable，如果不是当前元素，则会移除.ui-hover。因此，最顶层将收到.ui-hover，其下的元素将删除它。

享受，报告任何问题。

谢谢，

防止CSS：悬停样式传播

3 个答案: