所以我背后有一些span
和一个button
。我想要的是隐藏span
- 元素并在指针位于按钮位置时触发button
- click事件
但是我无法做到这一点,因为click事件会直接转到span
- 事件处理程序。
我尝试使用pointer-events: none
来做,但在这种情况下,我将无法附加mouseover
- 事件。
还尝试设置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>
答案 0 :(得分:1)
我终于找到了一个仅限CSS的解决方案,使用位置,不透明度和display: none;
这里发生的是,如果我们悬停跨度,它会消失为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>
答案 1 :(得分:0)
$('#clicker').on('click', function(event) {
alert('result');
})
$('#myspan').on('mouseenter', function (event) {
$(this).animate({ 'opacity': 0 });
$('#clicker').click()
});
$('#myspan').on('mouseleave', function (event) {
$(this).animate({ 'opacity': 0.5 });
});
&#13;
#myspan {
position: fixed;
font-size: 22px;
z-index:500;
position: fixed;
left: 50%;
}
&#13;
<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>
&#13;
答案 2 :(得分:0)
使用:after
伪代替使用跨度放置您的内容。所以你可以隐藏它而不影响按钮动作。请查看下面的代码段以供参考。
$('#clicker').on('click', function(event) {
alert('result');
})
&#13;
#clicker:after {
content: "{{property}}";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#clicker:hover:after {
opacity: 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='clicker' style='width: 250px; height: 20px; left: 40%; z-index: -1; position: absolute'>
Clicker
</button>
&#13;
答案 3 :(得分:0)
请尝试处理按钮鼠标悬停和鼠标离开事件而不是跨度,如下所示。
<script>
$('#clicker').on('mouseenter', function (event) {
$('#myspan').animate({ 'opacity': 0 });
$(this).click();
});
$('#clicker').on('mouseleave', function (event) {
$('#myspan').animate({ 'opacity': 0.5 });
});
$('#clicker').on('click', function (event) {
alert('result');
})
</script>
答案 4 :(得分:0)
只需对代码进行少量修改即可使用!
$('#myspan').on('mouseenter', function (event) {
$(this).animate({ 'opacity': 0 }, 500).delay(400).queue(function (next) {
$(this).css('display', 'none');
next();
});
});
$('#clicker').on('mouseleave', function (event) {
$('#myspan').css('display', 'block').animate({ 'opacity': 0.5 });
});
$('#clicker').on('click', function(event) {
alert('result');
})
&#13;
#myspan {
position: fixed;
font-size: 22px;
z-index:500;
position: fixed;
left: 50%;
}
&#13;
<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>
&#13;