當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的後代被盤旋」。問題是你的h1元素不是你的img標籤的後代，它是兄弟姐妹。您可以更改使用adjacent sibling selector以獲得所需的效果：

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

Answer 3

選擇有選擇的元素爲它應用規則。
在你的小提琴img:hover沒有加入者h1因此沒有任何反應。
在這種情況下，由於h1是img:hover下一個兄弟，你可以使用+選擇

img:hover + h1 

fiddle

Answer 4

你需要了解什麼img:hover h1說：

在上:hover名爲img所有標籤的所有子元素標記命名爲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隱藏和顯示的標題。