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

Posted 2023-03-06

【中文标题】将悬停样式应用于任何孩子但不是父母

【英文标题】：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

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

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

【问题讨论】：

不....对不起。如果您将鼠标悬停在孩子身上，那么您将悬停在父母身上。

尝试检查类似问题的答案：***.com/a/2701495/3340702

CSS How to apply child:hover but not parent:hover 的可能副本

你能阻止悬停事件的传播吗？还是有一些选择器只能获取您所在的元素？

这在 CSS 中是不可能的。每个子元素都在父元素内部，因此当您将鼠标悬停在子元素上时，您也将鼠标悬停在其所有父元素上。这可能在 Javascript 中是可能的，但是......

【参考方案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>