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

How to add a column to a large MySQL table

The question is referenced from: https://www.zhih...

Two query methods when the MySQL query field type is json

The table structure is as follows: id varchar(32)...

Parsing MySQL binlog

Table of contents 1. Introduction to binlog 2. Bi...

Several implementation methods of the tab bar (recommended)

Tabs: Category + Description Tag bar: Category =&...

Linux checkup, understand your Linux status (network IO, disk, CPU, memory)

Table of contents 1. Core commands 2. Common comm...

HTML head tag detailed introduction

There are many tags and elements in the HTML head ...

How to mount a disk in Linux and set it to automatically mount on boot

Knowing that everyone's time is precious, I w...

The implementation principle of Tomcat correcting the JDK native thread pool bug

To improve processing power and concurrency, Web ...

Docker enables multiple port mapping commands

as follows: docker run -d -p 5000:23 -p 5001:22 -...

Vue integrates Tencent Map to implement API (with DEMO)

Table of contents Writing Background Project Desc...

Robots.txt detailed introduction

Robots.txt is a plain text file in which website ...

Java example code to generate random characters

Sample code: import java.util.Random; import java...