gpt4 book ai didi

css - 使用 CSS a :hover 更改嵌套元素的背景颜色

转载 作者:太空宇宙 更新时间:2023-11-04 13:36:29 32 4
gpt4 key购买 nike

我正在尝试使用 a:hover {background-color: rgb(189, 64, 132);} 结构更改以下脚本中#box 和#internalArrow 元素的背景颜色。

这是我的;

     <style type="text/css">  
#box
{
background-color: rgb(217, 9, 122);
height: 50px;
width: 50px;

position: absolute;
top:50%

}

#box:after {
content: ' ';
height: 0;
position: absolute;
width: 0;

border: 20px solid transparent;
border-right-color: #ffffff;

top: 50%;
left: 10%;
margin-left:-15px;
margin-top:-20px;
}

#internalArrow
{
width:0;
height:0;
position:absolute;

border: 20px solid transparent;
border-right-color: rgb(217, 9, 122);

top: 50%;
left: 10%;
margin-left:-5px;
margin-top:-20px;
z-index:100;

}

#box:hover + #internalArrow
{
background-color:rgb(189, 64, 132);
}

#wrapper
{
height:600px;
width:50px;
background-color:#ffffff;
opacity:0.9;
}

</style>

</head>
<body>
<div id="wrapper">
<div id="box">
<a id="anchor" href=""><div id="internalArrow"></div></a>
</div>
</div>

</body>

我使用了之前的答案 On a CSS hover event, can I change another div's styling?但它对我不起作用。我已经在 Chrome 和 Firefox 中尝试过了。有任何想法吗?谢谢。

最佳答案

在你的CSS中你有:

#box:hover + #internalArrow
{
background-color:rgb(189, 64, 132);
}

当多个 CSS 选择器应该用 , 表示时

#box:hover, #internalArrow:hover
{
background-color:rgb(189, 64, 132);
}

编辑:抱歉,我刚刚重读了您的问题,您在更改元素背景方面走在了正确的轨道上,但您使用了 + 的符号,它是相邻的兄弟组合器。

您需要做的就是删除“+”并执行此操作:

#box:hover #internalArrow
{
background-color:rgb(189, 64, 132);
}

这表示 #internalArrow 包含在 #box 中,'+' 只有在它跟随 #box 时才有效

参见 jsFiddle

关于css - 使用 CSS a :hover 更改嵌套元素的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23015720/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com