我有一个具有星爆效果(透明 png 背景)的 div,我想在它们悬停时将其叠加在一系列图像上;我必须使 div 变大才能包含图像,但这会妨碍检测图像上的悬停。 (我将它们全部作为背景图像,因此它们是通过高分辨率 css mediaquery 加载的)
每个“图像”都是一系列元素,现在看起来像这样:
<div class="section">
<div class="starburst"></div>
<a href="link">
div class="image">
<div class="non-hover"></div>
<div class="hover"></div>
</div>
<p>Caption</p>
</a>
</div>
JS是这样的
$('.section a').hover(
function () {
$('.speaker .hover').hide();
$(this).find('.non-hover').addClass('focus');
$(this).find('.hover').stop().show().animate({opacity:1.0}, 1000);
},
function () {
$(this).find('.hover').stop().animate({opacity:0.0}, 0);
$(this).find('.non-hover').removeClass('focus');
}
);
我的问题是把 .starbursts 放在哪里,如何处理它们,使它们位于前面,它们的背景图像位于悬停图像的顶部,但不会妨碍悬停在它们上。我不确定这是否可能,但希望有办法。将它们分开,因为我想以不同的方式设置它们的动画。
你可以使用CSS指针事件 https://developer.mozilla.org/en/CSS/pointer-events财产:
CSS 属性pointer-events 允许作者控制在什么情况下(如果有的话)特定的图形元素可以成为鼠标事件的目标。
.starbursts {
pointer-events: none
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)