如何在不影响父节点的情况下对叶节点进行更改

Question

页面中的所有元素都被指定为更改背景颜色和更改边框属性，如果悬停，但问题是我只想更改的元素是光标正下方的元素，似乎当我悬停某些东西时，所有的父母它也是悬停的，这是正常的，因为您也悬停在元素的父元素上，因为它的子元素嵌套在其中。但我发现firefox截图功能可以做到这一点。它有一个功能，可以让您截取页面的某个部分，并且在选择过程中，它显示页面的哪些部分仅通过在其周围制作虚线边框和白色覆盖来保存。我认为这与javascript有关，但我不知道如何检查元素是否悬停通过检查元素是否悬停来检查元素是否是光标下的元素。从哪里开始检查事情。比方说<div>    <div> put border on me if hovered </div>    <div> put border on me if hovered         <span> put border on me if hovered and don't put border on parent </span>    </div></div>CSS*:hover { border: 5px dashed white; }我还没有制作 javascript，因为我不知道首先要做什么

Answer 1

如果您希望当您将鼠标悬停在特定元素上时，其样式已更改，我可以在 JS 的帮助下提供此功能

document.addEventListener('mouseover', function (e) {

    e.stopPropagation();

    e.target.setAttribute('style', 'border: 5px dashed red');

});

document.addEventListener('mouseout', function (e) {

    e.target.removeAttribute('style');

});

您可以通过不同的方式更改样式，例如添加特定的类。我希望这有帮助

Answer 2

因此，您希望，当您将鼠标悬停在特定 div 上时，该特定 div 必须具有边框而不是父级。

如此简单的任务可以轻松实现我的 CSS。你必须根据他们的类名来定位 div。

（基于您上面的代码 div）

    <div>

      

      <div className="parentBorder"> put border on me if hovered </div>

      <div>

        <span> put border on me if hovered and don't put border on parent </span>

      </div>

    

    </div>

用于此的 CSS 文件

.parentBorder {

  border: none;

}

.parentBorder:hover {

  border: 5px solid green;

}

span {

  border: none;

}

span:hover {

  border: 5px solid blue;

}

这将解决您的问题并且通过 JAvaScript，您可以通过在此任务的特定 div 上启动 onClick() 函数事件来做到这一点