当img悬停时，改变h1的宽度

Question

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

http://jsfiddle.net/xJ4dc/

感谢。

Answer 1

试试这个：

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

<强> jsFiddle example

此规则表示，只要将鼠标悬停在图像上，请将所有相邻同级<h1>元素的宽度更改为100％。

Answer 2

选择器必须选择要应用规则的元素 在你的小提琴中img:hover没有任何经典h1因此没有任何反应 在这种情况下，由于h1是img:hover的下一个兄弟，您可以使用+选择器

img:hover + h1

fiddle

Answer 3

您需要了解img:hover h1所说的内容：

  

在img上名为:hover的所有代码上，所有子元素标记为h1

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

但我建议做的是http://jsfiddle.net/xJ4dc/5/

<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隐藏并显示标题。

Answer 4

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

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