Img hover event flashing, imghover event flashing

Img hover event flashing, imghover event flashing

Today, I wrote a Photo Album photo to show the details with the mouse floating. When I encountered a flash bug and solved it smoothly, I wrote it down and shared it with you.

I am using the 'label: hover + tag' format. If you use events such as jquery mouseover and mouseout, you can also refer to this method. The principle is the same.

Analysis: The image is used, and then the div + span is used to write the text and background to be displayed with the mouse floating. Code as follows: (flashing will occur)

Html code:

1  2 <div> 3 <span> image 1 </span> 4 <span> name </span> 5 </div>

Css code:

1*{2 margin: 0; 3 padding: 0; 4} 5 img, div {/* Note that the image and div size must be consistent, and the position must overlap */6 width: 200px; 7 height: 200px; 8} 9 div {/* after the div position is set, set it to hide */10 background-color: rgba (242,242,242, 0.7); 11 position: absolute; 12 margin-top:-203px; 13 display: none; 14} 15/* bug position */16 img: hover + div {/* move the cursor to img, change the display style of the following div to display block */17 display: block; 18 cursor: pointer; 19} 20 span {21 display: inline-block; 22 margin-bottom: 15px; 23 margin-left: 70px; 24} 25 span: nth-of-type (1) {26 margin-top: 50px; 27}

Think about the mouse floating process. When you move the mouse over img, The div is displayed. However, after the div is displayed, although the Mouse looks inside the image area, however, the element of the mouse hover has become the div that appears, so at this time, the div will continue to return to display: none;, and the cycle will continue to flash.
Therefore, add a style, that is, move the mouse to the div, and modify the display style of the div to block. You can directly add the Code with the bug location (Add ', div: hover'). The Code is as follows:

img:hover + div, div : hover{　　display: block;　　cursor: pointer;}

In this way, the photo floating effect is perfect ~

If any error occurs, please correct it!