css - imgにカーソルを合わせたときに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は、「ホバーされている img の子孫である任意の h1 要素」を意味します。問題は、要素がタグh1の子孫ではなく、兄弟であることです。隣接する兄弟セレクターimgを使用するように変更して、目的の効果を得ることができます。

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

</p>

4 に答える 4