css - 当img悬停在h1上时改变h1的宽度

Question

当您将鼠标悬停在 img 上时，我正在尝试扩展我的 h1 标签的宽度，但是我似乎无法让它工作。

谢谢。

score 2 · Accepted Answer

试试这个：

img:hover + h1 {
    width:100%;
}

该规则表示，每当您将鼠标悬停在图像上时，将所有相邻兄弟<h1>元素的宽度更改为 100%。

score 1 · Accepted Answer

选择器必须选择元素才能应用规则。
在你的小提琴img:hover中没有后代，h1因此什么也没有发生。
在这种情况下，因为h1是你的下一个兄弟，img:hover你可以使用+选择器

img:hover + h1

score 1 · Accepted Answer

你需要明白img:hover h1说什么：

img在:hover所有子元素上命名的所有标签上h1

您需要使用加号img:hover + h1才能工作。

<ul>
    <li>
        <img src="http://www.real-whitby.co.uk/wp-content/uploads/donkey.jpg" />
        <h1>This is a heading</h1>
    </li>
</ul>

进而：

li img {
    width: 100px;
}

li h1 {
    display: none;
}

li img:hover + h1 {
    display: block;
}

请注意，我将使用display:none;然后display:block隐藏和显示标题。

score -1 · Accepted Answer

选择器的img:hover h1意思是“任何 h1 元素，它是悬停在 img 的后代的任何 h1 元素”。问题是您的h1元素不是img标签的后代，而是兄弟姐妹。您可以更改为使用相邻兄弟选择器来获得所需的效果：

img:hover + h1 {
    width:300px;
}

</p>

4 回答 4