web-dev-qa-db-ja.com

ホバーした要素の子ではない要素にCSSホバー効果を適用できますか？

これが可能かどうかわかりませんでした。現在CSS3アニメーションで作業しており、ページ上の他のdiv要素（子以外）に影響を与えるリンクにカーソルを合わせる必要があります。回避策があるかどうかわかりませんでした。

<style type="text/css">

#header {
 background-color:red;
}

#header:hover .element {
 background-color:blue;
}

.element {
 background-color:green;
}

</style>

-

<header id="header">
     <li><a href="#">Hover</a></li>
</header>

<div class="element" >
 <p>hello world </p>
</div>
csshtmlhoverbackground-color
24
WilliamB

これらは隣接する兄弟なので、 隣接する兄弟セレクター ：+を使用できます。

#header:hover + .element {
 background-color:blue;
}

これは、最新のほとんどのブラウザーで十分にサポートされています*。 IE7はバグがある可能性があります。 IE6以前ではサポートされていません。

*他の回答の1つは、一般的な兄弟セレクターについて言及していますが、 このバグ が原因で、:hoverのような動的疑似クラスで使用すると、Webkitでは機能しません。動的な疑似クラスで隣接する兄弟セレクターをスタックしようとすると、この同じバグがWebkitで問題を引き起こすことに注意してください。たとえば、#this:hover + sibling + siblingはWebkitでは機能しません。

27
stevelove

兄弟要素を選択する 一般的な兄弟セレクター （~）があります。

したがって、投稿したHTMLでは、ホバーされたヘッダーの後続の兄弟の場合、#header:hover ~ .elementは<div class="element">を選択します。

Even IE 7がサポートしています なので、比較的堅固な地面にいます。

17
Paul D. Waite

兄弟セレクターのWebkitバグについては、この記事にはCSSのみの回避策があります。

http://css-tricks.com/webkit-sibling-bug/

引用：

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

上記はページ上にアニメーションを作成し、これは魔法のように問題を解決するようです。上記をメインのcssに直接追加するか、Webキットのみのスタイルシートを作成して、IEをハックすることができます。

次のようなwebkitのみのスタイルシートをお勧めします：

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:0)" href="webkit.css"/>

それは他のブラウザからそれを隠し、バグが修正されると将来より簡単に削除できるためです。

2
rjc730

残念ながら、これは、.elementクラスが.bgchange要素内にない限り機能しません。これがカスケードの性質です。構造的または階層的に相互に削除されたDOM要素に（CSSのみで）影響を与えることはできません。

1
Phil.Wheeler