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:
|
>>: How to obtain a permanent free SSL certificate from Let's Encrypt in Docker
Recommend
Summary of the pitfalls of using primary keys and rowids in MySQL
Preface We may have heard of the concept of rowid...
js dynamically adds example code for a list of circled numbers
1. Add the ul tag in the body first <!-- Unord...
How to use nginx to access local static resources on Linux server
1. Check whether port 80 is occupied. Generally, ...
Detailed usage of React.Children
Table of contents 1. React.Children.map 2. React....
Use CSS to switch between dark mode and bright mode
In the fifth issue of Web Skills, a technical sol...
Two ways to understand CSS priority
Method 1: Adding values Let's go to MDN to se...
Img semi-transparent processing Img plus semi-transparent background implementation ideas and code
Copy code The code is as follows: <!DOCTYPE ht...
Do you know the common MySQL design errors?
Thanks to the development of the Internet, we can...
How to enable Swoole Loader extension on Linux system virtual host
Special note: Only the Swoole extension is instal...
Nginx one domain name to access multiple projects method example
Background Recently, I encountered such a problem...
Tips for turning pixels into comprehensive brand experiences
Editor: This article discusses the role that inte...
Detailed process of creating a VR panoramic project using React and Threejs
Recently, I'm learning to use React with Thre...
Vue implements a complete process record of a single file component
Table of contents Preface Single file components ...
How to use docker to deploy Django technology stack project
With the popularity and maturity of Docker, it ha...
Nginx forwarding based on URL parameters
Use scenarios: The jump path needs to be dynamica...