在 JavaScript 中更改悬停图像

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中更改悬停图像

作者：迹忆客最近更新：2024/03/16 浏览次数：

在 JavaScript 中，我们跟踪一些特定的代码块或方法来执行在鼠标悬停时更改图像的任务。相反，有效的方法是创建一个用户定义的函数，该函数将考虑图像源并与鼠标悬停效果配合。

我们的示例集将查看一个带有 HTML 属性 onmouseout 和 onmouseover 的演示，以触发脚本段中的某些功能。此外，在第二个实例中，我们将有一个与 jQuery 关联的 .hover() 函数。

让我们检查一下代码库以了解清楚的概念。

使用 HTML 属性 `onmouseover` 和 `onmouseout` 来触发函数

核心工作原理是基于 onmouseover 和 onmouseout。并且这些属性映射到具有其描述以在悬停时更改图像的功能。

我们将需要一个 jQuery CDN 来操作该函数，因为它恰好依赖于带有 .attr() 的 jQuery。

代码片段：

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="menu" >
    <a href="#" id="home">
        <img id='menuImg' src="https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974" alt="logo" width="200px" height="150px"
onmouseover="onHover();" onmouseout="offHover();" />
    </a>
</div>

function onHover() {
  $('#menuImg')
      .attr(
          'src',
          'https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774');
}

function offHover() {
  $('#menuImg')
      .attr(
          'src',
          'https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974');
}

输出：

使用 `.hover()` 方法在悬停时更改图像

这个例子描述了处理 img 类 home 的 jQuery 方式。我们将为我们的图像源初始化类，然后我们将根据需要生成函数。

与上一个不同的是，我们在这里没有使用任何 HTML 属性。相反，我们依赖于 .hover() 方法，该方法很有效。

让我们跳到代码上。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <div>
    <img height="150px" width="200px" src="https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" alt="" class="home">
  </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script  type='text/javascript'>
$(document).ready(function(){
    $(".home").hover(
        function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");},
        function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");
    });
});
</script>
</body>
</html>