使用：別のクラスのCSSを変更するにはホバー？

Question

cssだけを使用して別のクラスの要素をホバリングすると、あるクラスのcssを変更する方法はありますか？以下のような

何か：

.item:hover .wrapper { /*some css*/ } 

のみ 'ラッパーが' 内部 'アイテム' ではない、それはどこか別の場所です。

私は本当にこの単純なもののためにjavascriptを使いたくないのですが、どうすればいいでしょうか？失敗した試行は次のとおりです。

document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";"; 

各クラスの要素は1つだけです。なぜ彼らはテンプレートを作ったときにIDを使わなかったのか分かりませんが、それはちょうどその方法であり、私はそれを変更できません。

[編集]

これはメニューです。各メニュー要素には異なるクラスがあります。要素にマウスを置くと、サブメニューが右にポップアップ表示されます。オーバーレイのようなものですが、「Inspect Element」ツールを使用すると、サブメニューがアクティブなときにウェブサイト全体のHTMLが変化することがわかります（サブメニュー以外は何も意味しません）。私が 'ラッパー'と呼ぶクラスは、サブメニューの背景を制御するCSSを持っています。私は2つのクラスの間で見ることができます本当に接続がありません。

Answer 1

子どもや兄弟要素を選択しない限り、CSSでは現時点では不可能です（他の回答はここに記載されています）。

その他の場合はJavaScriptが必要です。 jQueryとAngularのようなフレームワークは、比較的簡単にこの問題に取り組むことができます。新しいCSS（4）セレクタ:has()で

[編集]

、あなたは近い将来に実現可能なCSSのみのソリューションとなり、親要素/クラスをターゲットとすることができるでしょう！

Answer 2

提供されています.Wrapperは内部にあります。あなたがIE 6でないか、または.itemがタグである場合、CSSはうまく動作するはずです。あなたはそれがないと示唆する証拠を持っていますか？

編集：

CSSだけでは、その中に含まれていないものに影響を与えることはできません。 、これを実現するので、のようなあなたのメニューをフォーマットするには：

<ul class="menu"> 
    <li class="menuitem"> 
     <a href="destination">menu text</a> 
     <ul class="menu"> 
      <li class="menuitem"> 
       <a href="destination">part of pull-out menu</a> 
... etc ... 

と、このようなあなたのCSS：

.menu .menu { 
    display: none; 
} 

.menu .menuitem:hover .menu { 
    display: block; 
    float: left; 
    // likely need to set top & left 
} 

Answer 3

あなたが取ることができる2つのアプローチ、ホバー要素を持つように影響を与える（E）別の要素があります。 （F）：

1. FはEの子要素である、又は
2. Fは（F前のマークアップ/ DOM でそのE現れで）Eの後に、兄弟（または兄弟の子孫）の要素である：これらのオプションの最初を説明するために

（としてF子孫Eの/子）：

.item:hover .wrapper { 
    color: #fff; 
    background-color: #000; 
}​ 

FがEの兄弟要素であること、2番目のオプションを実証するために：

.item:hover ~ .wrapper { 
    color: #fff; 
    background-color: #000; 
}​ 

.wrapperが直近の兄弟で.item（2つの間に他の要素はありません）の場合、.item:hover + .wrapperを使用することもできます。

JS Fiddle demonstration。

参考文献：

• CSS 2.1 selectors, at the W3.org。

Answer 4

次のCSSを作成してください。あなたはそれがすべてのブラウザでサポートされていないので、 `getElementsByClassName`を使用したくない

.root:hover .child { 
 
    
 
}