我想要做的是,当我将鼠标悬停在#box
我想要添加字体大小的按钮上时,h1
它的子元素是#h
#box button:hover+#h #hi {
color: green;
font-size: 5rem;
}
#box button:hover~#h #hi {
color: green;
font-size: 5rem;
}
<div id="box">
<button style="height:100px;width:100px;">Hover Me</button>
</div>
<div id="h">
<h1 id="hi">HI IS THERE...</h1>
</div>
它不工作.......我知道我必须删除#box,但我试图在不删除父元素的情况下这样做......阅读这个......。我想要做什么做的是,当我将鼠标悬停在button
我想在 h1 上添加 font-size 时,它是 #h 的子元素
这是因为您使用~
and#h
和#hi
不是按钮的兄弟姐妹。您必须将#h
父级嵌套在#box
其中以使它们成为兄弟姐妹,然后使用>
选择器来定位#hi
。
见下文:
button:hover ~ #h > #hi {
color: green;
font-size: 5rem;
}
<div id="box">
<button style="height:100px;width:100px;">Hover Me</button>
<div id="h">
<h1 id="hi">HI IS THERE...</h1>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句