jQuery realizes image highlighting

jQuery realizes image highlighting

It is very common to highlight images on a page. Here is how to use jQuery to achieve the effect of highlighting images.

HTML code part

<body>
 <div>
 /*Add picture*/
  <img src="img/1.jpg">
  <img src="img/2.jpg">
  <img src="img/3.jpg">
  <img src="img/4.jpg">
  <img src="img/5.jpg">
  <img src="img/6.jpg">
 </div>
</body>

CSS code part

<style>
 html{background:#000;}
 div{
  width:700px;
  height:410px;
  border:1px solid #ddd;
  margin:50px auto;
  padding:0 20px;
 }
 div img{
        margin: 10px 10px 0 20px;
    }
</style>

jQuery code part

<script>
// Add hover event to the big box $("div").hover(function(){
 // Add hover event to each img $("img").hover(function(){
            // Add animation to the current img to change the transparency $(this).stop(true).animate({opacity:1},100)
                $(this).siblings().stop(true).animate({opacity:.5})
            })
        })
        // When the mouse moves away from the big box, add animation to change the transparency $("div").mouseout(function(){
            $("img").animate({opacity:1},100)
        })
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • jQuery realizes the method of highlighting the current picture when the mouse moves to it and graying out other pictures
  • jQuery plugin jFade highlights the pictures that the mouse passes over and darkens the others
  • jquery(1.3.2) Highlight the selected image border

<<:  HTML web page image tag

>>:  How to obtain a permanent free SSL certificate from Let's Encrypt in Docker

Recommend

Share MySql8.0.19 installation pit record

The previous article introduced the installation ...

10 excellent Web UI libraries/frameworks

1. IT Mill Toolkit IT Mill Toolkit is an open sou...

VMware Workstation 14 Pro installation and activation graphic tutorial

This article shares the installation and activati...

Detailed explanation of the method of comparing dates in MySQL

If there is a table product with a field add_time...

Vue project packaging and optimization implementation steps

Table of contents Packaging, launching and optimi...

Detailed explanation of views in MySQL

view: Views in MySQL have many similarities with ...

MySQL performance optimization: how to use indexes efficiently and correctly

Practice is the only way to test the truth. This ...

Introduction to using the MySQL mysqladmin client

Table of contents 1. Check the status of the serv...

A detailed introduction to JavaScript primitive values ​​and wrapper objects

Table of contents Preface text Primitive types Pr...

The Complete Guide to Grid Layout in CSS

Grid is a two-dimensional grid layout system. Wit...

Docker overlay realizes container intercommunication across hosts

Table of contents 1. Docker configuration 2. Crea...

Detailed explanation of putting common nginx commands into shell scripts

1. Create a folder to store nginx shell scripts /...

Summary of commonly used escape characters in HTML

The commonly used escape characters in HTML are s...