相关疑难解决方法(0)

我知道没有CSS父选择器,但是在没有这样的选择器的情况下悬停子元素时是否可以设置父元素的样式？

举个例子:考虑一个删除按钮,当悬停时会突出显示要删除的元素:

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

通过纯CSS,当鼠标悬停在按钮上时,如何更改此部分的背景颜色？

我有一些代码需要每个 div 具有相同的悬停效果。但是，当鼠标悬停在子级上时，我不希望效果持续存在于父级上。我理解为什么会这样 - 因为当您将鼠标悬停在父级或子级上时，鼠标仍然位于父级上方！

这个例子很好地说明了问题。

div {
  background: blue;
  min-width: 500px;
  min-height: 90px;
  margin: 40px;
  color:white;
  border: solid 2px white;
}

div:hover {
  background: green;
}

<div>
hover here and it is green. This is great.
    <div>
    hover here and I'd like there to be a blue parent and this should remain as the green child
    </div>
</div>

https://jsfiddle.net/5k0gaq37/8/

我想要的是当鼠标悬停在子div上时，悬停效果不再影响父级。HTML 必须保持原样（尽管我可以向任何 div 等添加另一个 css 类），现有的 CSS 也必须保持原样。父 CSS 可以是任何样式

我尝试了很多想法，展示任何想法都是毫无意义的，因为它们都如此不同，所以请原谅我没有展示任何其他想法。

狼群！

我想突出显示我悬停在上面的任何元素，就像 Chrome 开发工具所做的那样。

Chrome 开发工具图片

注意整个元素是如何浸透蓝色调的？这不像添加背景颜色或线性渐变那么简单，因为输入元素的内部仍然是白色的。

我尝试过使用不同的过滤方法，如色调旋转、对比度 w/亮度，甚至THIS MONSTER，但似乎没有任何效果。

我最接近的是一个漂亮的框阴影围绕元素突出显示。

Javascript： element.classList.add('anotherClass')

CSS： box-shadow: 0 0 5px #3fd290, 0 0 10px #36A9F7, 0 0 15px #36A9F7, 0 0 20px #36A9F7 !important;

帮助我实现我的梦想