将悬停样式应用于任何孩子但不是父母答案

【问题标题】：Apply hover style to any child but not parent将悬停样式应用于任何孩子但不是父母
【发布时间】：2015-11-18 11:47:50
【问题描述】：

我正在构建一个需要用户单击/选择页面上的元素的工具。页面内容/结构/css 未知。

我正在使用 javascript 鼠标进入/离开事件向元素添加/删除大纲类并向用户显示他们正在选择的内容。但是，这些事件是不可靠的，并且轮廓元素并不总是被单击的元素。

使用:hover css 添加样式更快更可靠。

有没有办法勾勒出任何悬停的元素，但没有它的父元素？

一种方法是：

*:hover { outline: 1px solid green; }

示例：http://codepen.io/anon/pen/xGvXbm

但这会勾勒出元素的每个父元素。

有没有办法从这个选择器中排除父母？

【问题讨论】：

不....对不起。如果您将鼠标悬停在孩子身上，那么您将悬停在父母身上。
尝试检查类似问题的答案：stackoverflow.com/a/2701495/3340702
CSS How to apply child:hover but not parent:hover 的可能副本
你能阻止悬停事件的传播吗？还是有一些选择器只能获取您所在的元素？
这在 CSS 中是不可能的。每个子元素都在父元素内部，因此当您将鼠标悬停在子元素上时，您也将鼠标悬停在其所有父元素上。这可能在 Javascript 中是可能的，但是......

标签： css css-selectors hover

【解决方案1】：

:hover * { outline: 1px solid green; }

也就是说，找到任何悬停的元素并将此样式应用于所有子元素。

【讨论】：

使用该方法，当body悬停时，样式应用于页面上的每个元素
如果你只想从正文中选择元素，你可以body :hover *

【解决方案2】：

您可以通过创建 2 个（或更多 div）兄弟而不是后代来做到这一点。然后绝对定位它们。现在，如果您对它们应用悬停，那么它将独立工作，因为它们不会相互继承。

例如：

<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>

然后是css

 *:hover {
   outline: 3px solid red;
  }

 .two, .three {

  position:absolute;
  top:0;
  left:0;
  }

【讨论】：

【解决方案3】：

使用 jQuery，您可以执行以下操作：

$('*').hover(
  function() {
    $('*').css('outline', 'none')
    $(this).css('outline', '3px solid red')
  },
  function() {
    $(this).css('outline', 'none')
  }
)

您还必须删除 :hover CSS 规则。查看CodePen 以及下面的 sn-p。

注意这似乎只在进入元素时起作用，离开时你必须有一个.mousemove()函数并检测鼠标是否在元素上，然后重复第一个.hover()函数中的代码。

$('*').hover(
  function() {
    $('*').css('outline', 'none')
    $(this).css('outline', '3px solid red')
  },
  function() {
    $(this).css('outline', 'none')
  }
)

/* *:hover {
  outline: 3px solid red;
} */

.one {
  display: inline-block;
  width: 1000px;
  height: 800px;
  background-color: green;
}

.two {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.three {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
  <div class="two">
    <div class="three"></div>
  </div>
  <div class="two">
  </div>
</div>

【讨论】：