我在全屏 div 上有一个“元素”。我想将鼠标悬停在 div ».section« 的背景图像中的 »element« 和 淡入淡出 上。仅显示背景图像没有问题,但我不知道如何添加淡入淡出动画。
$(function() {
$('.element').hover(function() {
$('.section').css('background-image', 'url(https://ih0.redbubble.net/image.87373734.8395/flat,800x800,075,t.jpg)');
}, function() {
// on mouseout, reset the background
$('.section').css('background-image', '');
});
});
.section {
width: 400px;
height: 400px;
border: 1px solid black;
text-align: center;
transition: 1s ease all;
}
.element {
margin-top: 45%;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<div class="element">hover me</div>
</div>
https://jsfiddle.net/sr1qj1pc/
你能帮我吗?
最佳答案
我已经更新了你的 fiddle 。
您可以单独使用 CSS,无需使用 jquery。您可以使用 pseudo element以获得您想要的效果。
在这种情况下,如果您将鼠标悬停在 .element
子元素上,然后显示父元素 (.section
) 的背景,您可以使用 point-events
指定在什么情况下(如果有)特定的图形元素可以成为鼠标事件的目标。 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
CSS:
.section {
width: 400px;
height: 400px;
border: 1px solid black;
text-align: center;
transition: 1s ease all;
position: relative;
pointer-events: none;
}
.section:after {
background: url(https://ih0.redbubble.net/image.87373734.8395/flat,800x800,075,t.jpg) repeat;
content: "";
opacity: 0;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
/* TRANSISITION */
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
.element {
position: relative;
top: 50%;
z-index: 1;
pointer-events: auto;
}
.section:hover:after{
opacity: 1;
}
关于jquery - 将鼠标悬停在元素上,在父 div 上淡入背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47198432/