jquery给图片添加鼠标经过时的边框效果

下面我将为您讲解如何使用jQuery给图片添加鼠标经过时的边框效果。

1. 引入jQuery库

在代码中使用jQuery库前，需要先引入该库。可以通过以下CDN链接引入：

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

将该代码放在HTML文件的<head>标签或 <body>标签的最前面。

或者也可以自己下载jQuery库并引进项目中。

2. 基本代码结构

在HTML中插入图片的标签，并为该标签添加ID属性，如下所示：

<div id="image-container">
  <img src="images/image-1.jpg" alt="image 1">
  <img src="images/image-2.jpg" alt="image 2">
  <img src="images/image-3.jpg" alt="image 3">
</div>

3. 编写CSS样式

可以为图片添加CSS样式，使图片在鼠标悬浮时实现边框的效果。具体方法可通过以下方式实现：

/* 设置边框样式 */
#image-container img:hover {
  border: 2px solid black;
}

4. 使用jQuery实现

使用jQuery的hover()方法，当鼠标悬浮在图片上时添加边框效果，鼠标移开时取消边框效果。代码如下：

$(document).ready(function(){
  $("#image-container img").hover(function(){ //鼠标滑过图片时，添加边框
    $(this).css("border", "2px solid black"); 
  }, function(){ //鼠标滑出图片时，边框样式消失
    $(this).css("border", "none");   
  });
});

简洁版代码如下：

$(function(){
  $("#image-container img").hover(function(){ 
    $(this).toggleClass("borderClass"); 
  });
});

5. DEMO 示例

以下为两条使用jQuery实现图片边框效果的示例：

示例一：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery图片边框效果</title>
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
  <style>
    #image-container img:hover {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="image-container">
    <img src="https://picsum.photos/id/237/200/300" alt="image 1">
    <img src="https://picsum.photos/id/238/200/300" alt="image 2">
    <img src="https://picsum.photos/id/239/200/300" alt="image 3">
  </div>
</body>
</html>

示例二：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery图片边框效果</title>
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
  <style>
    .borderClass {
      border: 2px solid black;
    }
  </style>
  <script>
    $(function(){
      $("#image-container img").hover(function(){ 
        $(this).toggleClass("borderClass"); 
      });
    });
  </script>
</head>
<body>
  <div id="image-container">
    <img src="https://picsum.photos/id/240/200/300" alt="image 1">
    <img src="https://picsum.photos/id/241/200/300" alt="image 2">
    <img src="https://picsum.photos/id/242/200/300" alt="image 3">
  </div>
</body>
</html>

以上就是jQuery实现图片边框效果的两条示例，期望能够帮助您学会如何利用jQuery为图片添加鼠标经过时的边框效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery给图片添加鼠标经过时的边框效果 - Python技术站