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>

请注意，我已经在你的html元素中添加了id，这样我就可以使用javascript来保存它们，而不会使代码变得复杂，也不会使用像jQuery这样的第三方库。

请注意，您还需要绑定onmouseout，否则父元素将保留新类 child-beeing-hovered 。

jQuery实际上使您的工作更轻松，但您应该尝试使用javascript至少一次。

我希望它有所帮助。

Answer 2

CSS中没有parent选择器。

你可以找到很好的解释，为什么不支持这里：http://snook.ca/archives/html_and_css/css-parent-selectors

Answer 3

您是否有理由不想使用JavaScript或JQuery？

你可以简单地说：

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

如何在子div的悬停时更改父div的属性

3 个答案: