html - 子divのホバーで親divのプロパティを変更する方法

Question

子divのホバーで親divのプロパティを変更する方法。それは純粋なCSSで行うことができますか？

html：

<div class="parent">
    <div class="child">
    </div>
</div>

css：

.parent{width:200px;height:100px;background:#cccccc;}
.child{width:200px;height:100px;background:transparent;}

Answer 1

プレーンCSSではなく、子がホバーされていることを親に通知するための何らかの形式のスクリプトが必要です（例）。

<div id="parentId" class="parent">
    <div id="childId" onmouseover="doOnMouseOver()" onmouseout="doOnMouseOut()" class="child">
    </div>
</div>
<script type="text/javascript">
    function doOnMouseOver() {
        var parentNode = this.parentNode;
        var newParentClass = parentNode.getAttribute('class') + 'child-beeing-hovered';
        parentNode.setAttribute('class', parentClass);
    }

    function doOnMouseOut() {
        var parentNode = this.parentNode;
        var newParentClass = parentNode.getAttribute('class').replace('child-beeing-hovered', '');
        parentNode.setAttribute('class', parentClass);
    }
</script>

コードを不必要に複雑にしたり、jQueryのようなサードパーティのライブラリを使用したりすることなく、JavaScriptでIDを取得できるように、HTML要素にIDを追加したことに注意してください。

onmouseoutもバインドする必要があることに注意してください。そうしないと、親要素が新しいクラスのchild-beeing-hoveredを保持します。

jQueryを使用すると実際に作業が簡単になりますが、少なくとも1回はjavascriptを使用してこれを実行してみてください。

お役に立てば幸いです。

Answer 2

parentCSSにはセレクターはありません。

ここでサポートされていない理由については、かなり良い説明があります：http ://snook.ca/archives/html_and_css/css-parent-selectors

Answer 3

JavaScriptやJQueryを使いたくない理由はありますか？

あなたは簡単にできます：

$("#child_id").hover(function (){
  $(this).parent("div").addClass("some-class")
});