gpt4 book ai didi

javascript - 用js检测onHover(jquery或css)事件

转载 作者:太空宇宙 更新时间:2023-11-04 12:01:26 25 4
gpt4 key购买 nike

是否有一个 jquery/js 脚本可以监听 onHover 事件?

我正在构建一个监听库,我们希望包括帮助网站所有者检测用户何时启动 onHover 事件的功能 - 这样他们就知道它引起了访问者/用户的注意。

enter image description here

监听 onHoverStart(当鼠标悬停在关联了 onHover 的元素上时)和 onHoverEnd(当鼠标离开该元素时)。

最佳答案

这是一个与 onmouseenteronmouseleave 一起使用的简单示例,我从 http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover 修改而来

当用户悬停时,图像会变大。当悬停停止时,图像恢复到正常大小。您还可以自定义函数以执行您想要的onmouseenteronmouseleave

<!DOCTYPE html>
<html>
<body>

<img onmouseover="WhenUserHovers(this)" onmouseout="WhenUserStopsHovering(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<p>The function WhenUserHovers() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function WhenUserStopsHovering() is triggered when the mouse pointer is moved out of the image.</p>

<script>
function WhenUserHovers(x) {
x.style.height = "64px";
x.style.width = "64px";
}

function WhenUserStopsHovering(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>

</body>
</html>

您还可以使用 jQuery(一个 javascript 库)mouseentermouseleave http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseleave

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

或者 jQuery 的 mouseovermouseout http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseover_mouseout

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

jQuery 的 mouseenter/mouseleavemouseover/mouseout 的区别在于 mouseenter 在鼠标指针进入所选元素时起作用,而 mouseover 在指针进入元素或元素的任何子元素时起作用。

关于javascript - 用js检测onHover(jquery或css)事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29760719/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com