悬停时更改父元素的背景颜色

Posted 2023-05-08

【中文标题】悬停时更改父元素的背景颜色

【英文标题】：Changing background-color of parent element on hover

【发布时间】：2014-10-29 13:25:19

【问题描述】：

下面是我的html代码。

        <div class="container">
            <a class="link1" href="">Link1</a>
            <a class="link2" href="">Link2</a>
            <a class="link3" href="">Link3</a>              
        </div>

CSS 中是否有任何选择器，当我将鼠标悬停在 Link1 或 Link2 上时，container 的 background-color 会发生变化。因为我是新手，我认为这就是我遇到一些问题的原因。

【问题讨论】：

您是否在将鼠标悬停在某些链接或所有链接上时更改背景？

一些链接...例如...如果我将鼠标悬停在 Link1 我希望“容器”的背景颜色为 #e5e5e5 并且当我将鼠标悬停在 Link2 上时，背景颜色应更改为#1e1e1e ，同样如此。

您需要 javascript 来完成此操作。 CSS 不允许你引用父元素。

Change parent div to a different background when hovering over individual child divs的可能重复

我是新人...我整天都在使用 jquery 来实现这种效果...但是每次我失败....嗯...我会继续...谢谢大家

【参考方案1】：

CSS4 (yup) 引入了 :has() 伪类 (http://dev.w3.org/csswg/selectors4/#relational)，但目前（截至 2014 年 9 月）任何引擎或浏览器都不支持此功能。

如果它被支持，那么（当前提议的）语法将是：

div.container:has(a.link1:hover)  background-image("link1.png"); 
div.container:has(a.link2:hover)  background-image("link2.png"); 
div.container:has(a.link3:hover)  background-image("link3.png"); 

在此之前，您需要依赖 Javascript，例如 jQuery 的类似 has (http://api.jquery.com/has/)。

【参考方案2】：

简短的回答是否。没有办法选择父母或按升序排列。

您能做的最好的事情就是更改 HTML 并使用另一个元素来伪造父级的背景。

像这样：

HTML

 <div class="container">
        <a class="link1" href="">Link1</a>
        <a class="link2" href="">Link2</a>
        <a class="link3" href="">Link3</a> 
        <div class="fake"></div>
 </div>

CSS

.fake 
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:yellow;

.link1, .link2, .link3 
    position:relative;
    z-index:1;

.link1:hover ~ .fake 
    background:#CCC;

.link2:hover ~ .fake 
    background:brown;

.link3:hover ~ .fake 
    background:orange;

查看此演示http://jsfiddle.net/g7brnb9q/

关于~ 选择器有助于选择同级元素，在这种情况下，链接后带有fake 类的任何元素。

这里有更多关于这个GO HERE

【讨论】：

顺便说一句~有什么用？？

很高兴能帮到你。如果您需要有关代码的任何解释，请告诉我。 @Gull 检查编辑

@Gull，~ 是一个通用的同级选择器...它针对所选元素之后的元素，并且位于同一节点级别...在这种情况下.fake是.link1 的兄弟姐妹，并且在它之后。

@LcSalazar，同样值得注意的是它与+ 相同，但不那么严格。兄弟选择器+ 选择第一个进行的兄弟。 ~ 选择所有进行中的兄弟姐妹

@Gull 如果您的问题已解决，请不要忘记将其标记为已完成。

【参考方案3】：

css 上没有父选择器...

如果您可以使用 javascript 方法，您可以执行以下操作：

document.getElementsByClassName("link1")[0].onmouseover = function() 
    this.parentNode.backgroundColor = "red";
;
document.getElementsByClassName("link2")[0].onmouseover = function() 
    this.parentNode.backgroundColor = "green";
;
document.getElementsByClassName("link3")[0].onmouseover = function() 
    this.parentNode.backgroundColor = "blue";
;