jquery悬停_jQuery悬停（）

jquery悬停

jQuery hover() function fires when the mouse pointer enters and leaves the selected HTML element. jQuery hover function will attach two event handlers to execute when the mouse enters and leaves the element.

当鼠标指针进入并离开选定HTML元素时，jQuery hover（）函数将触发。 jQuery悬停功能将附加两个事件处理程序，以在鼠标进入和离开元素时执行。

jQuery悬停 (jQuery hover)

The hover() method attaches handlers for mouse enter and mouse leave events.

hover()方法为鼠标进入和鼠标离开事件附加处理程序。

The syntax for using hover():

使用hover（）的语法：

hover(handlerIn, handlerOut)悬停（handlerIn，handlerOut）

handlerIn is a function to execute when the mouse enters the html element and handlerOut function executes when the mouse leaves the element.

handlerIn是一个在鼠标进入html元素时执行的函数， handlerOut函数在鼠标离开该元素时执行。

hover (handlerInOut)悬停（handlerInOut）

Using this you can attach a single handler – handlerInOut that will execute with the mouse enter and mouse leave events. This function is shorthand for $( selector ).on( "mouseenter mouseleave", handlerInOut );.

使用此方法，您可以附加一个处理程序– handlerInOut ，该处理程序将与鼠标enter和鼠标离开事件一起执行。此函数是$( selector ).on( "mouseenter mouseleave", handlerInOut ); 。

jQuery悬停示例 (jQuery hover example)

Following example demonstrates jQuery hover() function usage.

下面的示例演示jQuery hover（）函数的用法。

<!DOCTYPE html>
<html>
<head>
<title>jQuery hover</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){$("div").hover(function() {$( this ).append( $( "<span> : Now You are a Super *****</span>" ) );}, function() {$( this ).find( "span:last" ).remove();}
);
});
</script><style>
.divClass1
{padding:5px;text-align:center;background-color:yellow;border:solid 1px;
}span {color: red;
}
</style>
</head>
<body><div class="divClass1">Enter JournalDev</div></body>
</html>

In this example, you can see the hover() function is attached with two handlers – append() method is the function executed when you enter the element and it will append a <span> element. When you leave the element find() method finds the <span> element and it’s removed from the parent element, which is the <div> element in this example.

在此示例中，您可以看到hover（）函数附加了两个处理程序– append（）方法是在您输入元素时执行的函数，它将追加一个<span>元素。当您离开元素时，find（）方法将找到<span>元素，并将其从父元素中删除，该父元素在本示例中为<div>元素。

Below is the output of above HTML page, just hover over it and notice the jQuery hover function in action.

下面是上面HTML页面的输出，将鼠标悬停在上面，并注意到jQuery悬停功能正在起作用。

演示地址

That’s all for a simple jQuery hover() function example, it’s a very useful method for creating great animation and effects.

这就是一个简单的jQuery hover（）函数示例的全部，这对于创建出色的动画和效果是非常有用的方法。

翻译自: https://www.journaldev.com/4964/jquery-hover

jquery悬停