所以我有一些跨度和紧随其后的按钮.而我想要的是隐藏span-element并在指针位于按钮位置时触发按钮单击事件
但我不能这样做,因为click事件直接进入span-event处理程序.
我尝试使用指针事件:无,但在这种情况下,我将无法附加鼠标悬停事件.
还试图设置CSS display:none但在这种情况下,不会附加事件处理程序
有没有办法做到这一点?
$('#myspan').on('mouseenter', function (event) {
$(this).animate({ 'opacity': 0 });
});
$('#myspan').on('mouseleave', function (event) {
$(this).animate({ 'opacity': 0.5 });
});
$('#clicker').on('click', function(event) {
alert('result');
})
#myspan {
position: fixed;
font-size: 22px;
z-index:500;
position: fixed;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='myspan'>{{property}}</span>
<button id='clicker' style='width: 250px; height: 20px; left: 40%; z-index: -1; position: absolute'>
Clicker
</button>
最佳答案 我终于找到了一个只有CSS的解决方案,使用位置,不透明度和显示的动画:无;
这里发生的是,如果我们悬停跨度,它会消失为0不透明度,然后移出屏幕底部:-500px.一旦发生这种情况,鼠标将悬停在背景上,这会在跨度上调用无显示.您现在可以单击元素本身.将鼠标移出按钮时,动画将再次显示跨度.
#myspan {
position: fixed;
font-size: 22px;
z-index: 500;
width: 250px;
height: 2rem;
position: fixed;
left: 40%;
animation: fadeIn 1s;
text-align: center;
}
#myspan:hover {
opacity: 0;
animation: fadeOut 1s;
}
div {
display: block;
position: fixed;
left: 40%;
z-index: 50;
width: 250px;
height: 2rem;
text-align: center;
}
div:hover + span {
opacity: 0;
bottom: -500px;
display: none;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
bottom: -500px;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
bottom: -500px
}
1% {
bottom: auto;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='clicker'>
Clicker
</div>
<span id='myspan'>{{property}}</span>