The effect is as follows:
The original picture starts to change after the mouse enters
Implementation requirements:
Page loading starts, and the effect is as shown in the original figure. After the mouse enters the box, the picture will be highlighted at the current mouse position, and the rest of the pictures will be dimmed in turn.
Code:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Highlight</title> 6 <style type="text/css"> 7 *{ 8 padding: 0px; 9 margin: 0px; 10 } 11 body{ 12 background-color: black; 13 } 14 15 .wrap{ 16 width: 630px; 17 margin: 100px auto; 18 padding: 10px 0px 0px 10px; 19 height: 394px; 20 border: 1px solid white; 21 } 22 .wrap ul{ 23 list-style: none; 24 } 25 .wrap ul li{ 26 margin: 0px 10px 10px 0px; 27 float: left; 28 } 29 .wrap img{ 30 opacity: 0.5; 31 display: block; 32 } 33 </style> 34 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script> 35 <script type="text/javascript"> 36 //When the page is loaded,Obtain li,Register mouse in and mouse out events 37 $(function(){ 38 //Mouse move in event 39 $(".wrap>ul>li>img").mouseover(function(){ 40 $(this).css("opacity",1); 41 }); 42 //Mouse out event 43 $(".wrap>ul>li>img").mouseout(function(){ 44 $(this).css("opacity",0.5); 45 }); 46 }); 47 </script> 48 </head> 49 <body> 50 <div class="wrap"> 51 <ul> 52 <li><img src="images/01.jpg" ></li> 53 <li><img src="images/02.jpg" ></li> 54 <li><img src="images/03.jpg" ></li> 55 <li><img src="images/04.jpg" ></li> 56 <li><img src="images/05.jpg" ></li> 57 <li><img src="images/06.jpg" ></li> 58 </ul> 59 </div> 60 </body> 61 </html>
Code analysis:
1. Page structure HTML+CSS:
Box center margin:100px auto;
The box contains a ul and li contains img
2. Enter the IMG with the mouse, and the current img is highlighted
$(".wrap>ul>li>img").mouseover(function(){ $(this).css("opacity",1); });
3. Move the mouse out of the IMG to remove the highlight of the current img
$(".wrap>ul>li>img").mouseout(function(){ $(this).css("opacity",0.5); });
Download address of pictures and jQuery data: QQ group 694406023 (Baidu cloud data is a waste of memory)
Welcome to group communication and mutual discussion.