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
The question is referenced from: https://www.zhih...
The table structure is as follows: id varchar(32)...
Table of contents 1. Introduction to binlog 2. Bi...
Tabs: Category + Description Tag bar: Category =&...
Table of contents 1. Core commands 2. Common comm...
Generally, on national days of mourning, days of ...
There are many tags and elements in the HTML head ...
Knowing that everyone's time is precious, I w...
To improve processing power and concurrency, Web ...
as follows: docker run -d -p 5000:23 -p 5001:22 -...
Table of contents Writing Background Project Desc...
Robots.txt is a plain text file in which website ...
Sample code: import java.util.Random; import java...
Table of contents 1. Current limiting algorithm 2...
The relationship between Tomcat logs A picture is...