jquery - 使用Jquery离开ID div时如何清除mousemove
问题描述
尝试在离开 id #2ndCol 时使悬停按钮消失。
由于某种原因,当鼠标悬停在主页横幅上的其他按钮上时,悬停按钮不会隐藏。
开发站点在这里: http ://buildhopedev.wpengine.com/
尝试理解并调查: jquery mousemove 如何停止
不过还是超级新手。
<script>
jQuery(function($){
$('#2ndCol').mousemove(function(event) {
var left = event.pageX - $(this).offset().left + -75;
var top = event.pageY - $(this).offset().top + -30;
$('#button-hover').css({top: top,left: left}).show();
console.log (left, top);
});
$('#2ndCol').mouseleave(function() {
('#button-hover').hide();
});
});
</script>
只希望鼠标移动功能仅在将鼠标悬停在孩子(Corin)上时才处于活动状态。他上方的列是#2ndCol
解决方案
这是一个奇怪的...
从技术上讲,#button-hover
是#2ndCol
. 因此,当鼠标“移出”时,光标仍然在一个孩子上方……而且它会冒泡到父母身上。
我建议你有#button-hover
出来#2ndCol
。现在这将“闪烁”,因为一瞬间,鼠标将进入/退出......为了避免这种情况:添加pointer-events: none
到#button-hover
.
好的...但是您在该按钮内有一个可点击的链接,现在不监听指针事件。解决方案是重新考虑该链接的位置:
<a class="vp-a" href="http://buildhopedev.wpengine.com/wp-content/uploads/2019/04/LandmarkHomes_CureKids_BuildingHope_Small.mp4"><i style="color:#fff" class="far fa-play-circle"></i> <span style="color: #fff;"> WATCH CORINS’S STORY</span></a>
改为使用锚点包装#2ndCol
:
<a class="vp-a" href="http://buildhopedev.wpengine.com/wp-content/uploads/2019/04/LandmarkHomes_CureKids_BuildingHope_Small.mp4">
<div id="2ndCol">
<!-- and the rest of it's content, without the #hover-button -->
</div>
</a>
并将其保留在#hover-button
(页面中的其他位置):
<i style="color:#fff" class="far fa-play-circle"></i>
<span style="color: #fff;"> WATCH CORINS’S STORY</span>
最后,这是我建议的事件处理程序。
一个用于鼠标输入,一个用于鼠标移出,一个用于鼠标移动。
$("#secondCol").on("mouseenter", function(){
$('#button-hover').show();
});
$("#secondCol").on("mouseleave", function(){
$('#button-hover').hide();
});
$("#secondCol").on("mousemove", function(){
var left = event.pageX - $(this).offset().left + -75;
var top = event.pageY - $(this).offset().top + -30;
$('#button-hover').css({top: top,left: left});
console.log (left, top);
});
所以如果你跟着我......你现在应该有一个悬停时显示的“化妆品”按钮......并且点击由“区域”div处理。
那应该会更好。;)
推荐阅读
- javascript - 获取数据后:新状态未定义
- sql - 从没有外键的两个模型的 JOIN 中检索值(Django)
- azure-data-factory - 在 ADF ARM 模板中参数化自托管集成运行时
- sql - SQL:尝试获取用户第一笔交易时的交易数量(新收入)
- opengl - glDrawElements 导致访问冲突
- java - 获取JSON对象java的具体值
- python - Python Dash:如何使用两个回调更新相同的本地存储?
- python - 如何在 discord.py 中获取公会 ID?
- python - Numpy unique 保留第一个副本
- amazon-web-services - 如何为 ec2 实例设置 aws“MemoryUtilization”警报?