悬停每个 div 但悬停的一个
Hover every div but one that' hovered
我想在 hover module-wrap div 之后在 0.3 上设置其他不透明度并且只显示 hovered div
。我在 css:
中做了类似的东西
我有类似的东西:
.wrap:hover .module-wrap:not(:hover) {
opacity: 0.3;
}
.wrap:hover>*:hover {
opacity: 1;
}
<div class="wrap">
<div class="module-wrap">
<p>something</p>
</div>
<div class="module-wrap">
<p>something</p>
</div>
<div class="module-wrap">
<p>something</p>
</div>
<div class="module-wrap">
<p>something</p>
</div>
</div>
有效 - 当我将鼠标悬停在一个元素上时,其他元素设置为 opacity: 0.3
。但是当我将鼠标悬停在 wrap 上时,它会使所有内容的不透明度都设置为 0.3。我只想将它设置在 divs 上,当我将鼠标悬停在 div 以外的其他地方时,使其不透明度为 1。我该怎么做?
我猜你正在寻找这样的东西(JQuery):
$('.module-wrap').hover(
function() {
$('.module-wrap').css('opacity', '0.3')
$(this).css('opacity', '1')
}, function() {
$('.module-wrap').css('opacity', '1');
}
)
我想在 hover module-wrap div 之后在 0.3 上设置其他不透明度并且只显示 hovered div
。我在 css:
我有类似的东西:
.wrap:hover .module-wrap:not(:hover) {
opacity: 0.3;
}
.wrap:hover>*:hover {
opacity: 1;
}
<div class="wrap">
<div class="module-wrap">
<p>something</p>
</div>
<div class="module-wrap">
<p>something</p>
</div>
<div class="module-wrap">
<p>something</p>
</div>
<div class="module-wrap">
<p>something</p>
</div>
</div>
有效 - 当我将鼠标悬停在一个元素上时,其他元素设置为 opacity: 0.3
。但是当我将鼠标悬停在 wrap 上时,它会使所有内容的不透明度都设置为 0.3。我只想将它设置在 divs 上,当我将鼠标悬停在 div 以外的其他地方时,使其不透明度为 1。我该怎么做?
我猜你正在寻找这样的东西(JQuery):
$('.module-wrap').hover(
function() {
$('.module-wrap').css('opacity', '0.3')
$(this).css('opacity', '1')
}, function() {
$('.module-wrap').css('opacity', '1');
}
)