如何在子 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;}
不是使用纯 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 来做这件事。
我希望它有所帮助。
您是否有不想使用 JavaScript 或 JQuery 的原因?
你可以简单地:
$("#child_id").hover(function (){
$(this).parent("div").addClass("some-class")
});
parent
CSS中没有选择器。
您可以在这里找到很好的解释为什么不支持它:http: //snook.ca/archives/html_and_css/css-parent-selectors