悬停子项 DIV 并更改其他父项的样式 DIV
Hover child DIV and change style of other parent DIV
我正在尝试制作一个非常简单的 CSS 悬停效果。
<div class="menu">
<div class="child"></div>
</div>
<div class="nav">
<div class="item1"></div>
</div>
我希望发生的事情是,当您将鼠标悬停在 <div class="child"></div>
上时,它会更改 <div class="nav"></div>
的元素样式 我已经尝试了很多方法,例如
.child:hover ~ .nav { }
当然,当我这样做时,它会在父 DIV '.menu' 中搜索带有 class 'nav' 的 DIV,对吗?
我也试过了
.child:hover .nav {
}
和
.child:hover + .nav {
}
我确实觉得问这个问题有点愚蠢,因为解决方案可能很简单,但我已经尝试解决这个问题几个小时了...
遗憾的是,您无法使用纯 CSS 来控制父元素。
jQuery 是您最好的选择,例如:
$('.child').hover(function() {
$(this).parent().addClass('someClassForParentStyling');
}, function() {
$(this).parent().removeClass('someClassForParentStyling');
});
在您的 CSS 中,为父元素设置您想要的样式:
.someClassForParentStyling {
background: #efefef;
}
使用 jQuery,您可以使用 .hover()
将 css 添加到导航 div 中,如下所示
$(document).ready(function() {
$('.child').hover(function() {
$('.nav').toggleClass('myStyle');
});
});
.myStyle {
background-color: lightgray;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
Menu Element
<div class="child">Child Element</div>
</div>
<div class="nav">
Nav Element
<div class="item1">Item 1</div>
</div>
我正在尝试制作一个非常简单的 CSS 悬停效果。
<div class="menu">
<div class="child"></div>
</div>
<div class="nav">
<div class="item1"></div>
</div>
我希望发生的事情是,当您将鼠标悬停在 <div class="child"></div>
上时,它会更改 <div class="nav"></div>
的元素样式 我已经尝试了很多方法,例如
.child:hover ~ .nav { }
当然,当我这样做时,它会在父 DIV '.menu' 中搜索带有 class 'nav' 的 DIV,对吗?
我也试过了
.child:hover .nav {
}
和
.child:hover + .nav {
}
我确实觉得问这个问题有点愚蠢,因为解决方案可能很简单,但我已经尝试解决这个问题几个小时了...
遗憾的是,您无法使用纯 CSS 来控制父元素。
jQuery 是您最好的选择,例如:
$('.child').hover(function() {
$(this).parent().addClass('someClassForParentStyling');
}, function() {
$(this).parent().removeClass('someClassForParentStyling');
});
在您的 CSS 中,为父元素设置您想要的样式:
.someClassForParentStyling {
background: #efefef;
}
使用 jQuery,您可以使用 .hover()
将 css 添加到导航 div 中,如下所示
$(document).ready(function() {
$('.child').hover(function() {
$('.nav').toggleClass('myStyle');
});
});
.myStyle {
background-color: lightgray;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
Menu Element
<div class="child">Child Element</div>
</div>
<div class="nav">
Nav Element
<div class="item1">Item 1</div>
</div>