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:
|
>>: How to obtain a permanent free SSL certificate from Let's Encrypt in Docker
Table of contents The first step is to download M...
The previous article introduced the installation ...
1. IT Mill Toolkit IT Mill Toolkit is an open sou...
This article shares the installation and activati...
If there is a table product with a field add_time...
Table of contents Packaging, launching and optimi...
view: Views in MySQL have many similarities with ...
Practice is the only way to test the truth. This ...
Table of contents 1. Check the status of the serv...
Table of contents Preface text Primitive types Pr...
Preface Intel's hyper-threading technology al...
Grid is a two-dimensional grid layout system. Wit...
Table of contents 1. Docker configuration 2. Crea...
1. Create a folder to store nginx shell scripts /...
The commonly used escape characters in HTML are s...