0

如何在子 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;}
4

3 回答 3

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>

请注意，我已将 id 添加到您的 html 元素中，这样我就可以使用 javascript 获取它们，而不会使代码变得不必要的复杂，也不会使用 jQuery 等第三方库。

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

jQuery 实际上让你的工作变得更轻松，但你应该至少尝试一次使用 javascript 来做这件事。

我希望它有所帮助。

于 2013-02-28T15:44:23.990 回答
0

您是否有不想使用 JavaScript 或 JQuery 的原因？

你可以简单地：

$("#child_id").hover(function (){
  $(this).parent("div").addClass("some-class")
});
于 2013-02-28T15:23:46.767 回答
0

parentCSS中没有选择器。

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

于 2013-02-28T15:15:55.807 回答