悬停在悬停的图像

jQuery的一个非常酷的功能是能够动态更改图像的能力，例如当您将鼠标移到屏幕的某个区域时，图片将会改变。 如何做：您参考图像SRC属性并通过2个函数更改它。第一个功能更改图像，第二个功能将其重新更改。然后，在HTML中，我们将事件添加到鼠标将触发功能的区域（请注意，这些触发器也可以添加到JavaScript中）。那样简单。参见现场演示

jQuery更改图像动态

<span>//this code sits outside the (document).ready function
</span>
<span>function twittereyesopen() {
</span>	<span>//alert("open");
</span>	<span>var name_element = $('#twitter-image'); 
</span>	name_element<span>.src = "/images/page-images/twitter-eyes-open.jpg";
</span><span>}
</span>
<span>function twittereyesclosed() {
</span>	<span>//alert("closed");
</span>	<span>var name_element = $('#twitter-image');
</span>	name_element<span>.src = "/images/page-images/twitter-eyes-closed.jpg";
</span><span>}</span>

以下是HTML：

经常询问有关jQuery图像悬停效果

的问题

>我如何使用jQuery更改悬停的图像？

使用jQuery上的悬停图像，您需要使用Hover（）方法。此方法指定两个函数要在所选元素上徘徊时运行的两个函数。当鼠标输入HTML元素时，执行第一个函数，并且在鼠标离开HTML元素时执行第二个函数。这是一个简单的示例：

$（document）.ready（function（）{$（“ img”）。hover（function（）{$（this）.attr（“ src”，“ image2.jpg”） }）;
}）;
在此示例中，当您悬停在图像上时，它会更改为“ image2.jpg”。当您将鼠标移开时，它会更改为“ image1.jpg”。

>我可以使用CSS代替jQuery更改悬停的图像吗？这可以使用：悬停伪级来完成。这是一个示例：

img：悬停{

content：url（'image2.jpg'）;

>}

在此示例中，当您悬停在图像上时，它会更改为'image2.jpg'。但是，当鼠标离开图像时，此方法无法提供一种更改图像的方法。对于该功能，您需要使用JavaScript或jQuery。

>我如何使用jQuery？
在其他div上更改图像？
以更改悬停在其他div上的图像，您可以将Hover（）方法与Find（）方法组合使用Hover（）方法。 Find（）方法返回所选元素的后代元素。以下是一个示例：

$（document）.ready（function（）{$（“＃div2”）。find（“ img”）。attr（“ img”）。 $（“＃div2”）。查找（“ img”）。attr（“ src”，“ image1.jpg”）;

}）;

}）;

}）;

在此示例中，当您悬停在'div1'上时，'div1'，'div2'中的image to div2'变化为'image2.jpg'。当您将鼠标从“ Div1”移开时，“ Div2”中的图像会更改为“ Image1.jpg”。

>如何使用jQuery？

在列表项目上更改图像？儿童（）方法返回所选元素的所有直接孩子。以下是一个示例：

$（document）.ready（function（）{$（this）.children（“ img”）。attr（“ img”）。 $（this）.children（“ img”）。attr（“ src”，“ image1.jpg”）;
}）;
}）;
}）;
在此示例中，当您将悬停在列表项目上时，该列表的子映像将变为'image2.jpg'。当您将鼠标从列表项目中移开时，儿童图像会更改为“ image1.jpg”。

>当使用jquery？

添加过渡效果时，我如何添加图像在悬停时添加过渡效果，以添加图像在悬停时添加过渡效果，您可以使用fadein（）和fadein（）（）（）方法（）方法。这些方法逐渐将所选元素的不透明度从隐藏到可见的（Fadein）以及从可见到隐藏（vadeout）。这是一个示例：

$（document）.ready（function（）{$（“ img”）。hover（function（function（）{
$（this）.fadeOut（500，function（）{
$（
$） function（）{
$（this）.fadeOut（500，function（）{
$（this）.attr（“ src”，“ image1.jpg”）。然后逐渐消失。当您将鼠标移开时，它会逐渐消失，更改为“ image1.jpg”，然后逐渐消失。数字500表示效果的持续时间。

以上是悬停在悬停的图像的详细内容。更多信息请关注PHP中文网其他相关文章！