Question

我正在尝试重新创建类似chrome developer tools元素检查器的东西，其中我可以获取当前正在悬停的元素。

我想为页面上的每个元素添加一个悬停效果，如下所示：

:hover {
    border: 1px solid blue !important;
}

但问题是它会向我显示每个单独的父元素，因为它们也在被徘徊。

:hover {
  border: 1px solid blue !important;
}

<div>1  
    <div>1.1 
        <div>1.1.1</div>
        <div>1.1.2</div>
    </div>
    <div>1.2 
        <div>1.2.1</div>
        <div>1.2.2</div>
    </div>
</div>

由于没有父选择器，我无法检查是否省略了具有:hover属性的子元素的元素。

我无法使用:last-child，因为最低级元素可能是孙子。

任何方式都可以设计出最具子女元素的样式？

Answer 1

使用jQuery mouseenter / mouseleave找到解决方案：

$("*")
    .mouseenter(function(){
        $(this).addClass("hovered");
        $(this).parents(".hovered").removeClass("hovered"); 
    })
    .mouseleave(function(){
        $(this).removeClass("hovered");
        $(this).closest(":hover").addClass("hovered");
     });

.hovered {
    border: 1px solid blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>1  
    <div>1.1 
        <div>1.1.1</div>
        <div>1.1.2</div>
    </div>
    <div>1.2 
        <div>1.2.1</div>
        <div>1.2.2</div>
    </div>
</div>

风格儿童徘徊的元素

1 个答案: