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
MySQL 8.0.22 zip compressed package version (free installation) download, installation and configuration steps detailed
Table of contents The first step is to download M...
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...
Detailed explanation of how to dynamically enable/disable hyperthreading technology in Linux
Preface Intel's hyper-threading technology al...
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...