img's hover event flashes

Today I wrote an album photo for my classmates to show the effect of floating mouse details. I encountered a flashing bug and solved it successfully, so I wrote it down and shared it with everyone.

I use the form of ‘label: hover + label’. If you use jquery’s mouseover, mouseout and other events, you can also refer to this method. The principle is the same.

Analysis: Use for pictures, and then use div+span to write the text and background to be displayed when the mouse floats. The following code: (It will flash)

html code:

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="1.jpg"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">3</span> 　　<span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>图片1<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span> 　　<span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>姓名<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>

css code:

<span style="color: #008080;"> 1</span> <span style="color: #800000;">*</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">　　margin</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">　　padding</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">img,div</span>{<span style="color: #008000;">/*</span><span style="color: #008000;">注意图片跟div大小要一致，位置要重合</span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">　　width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">　　height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 8</span> }
<span style="color: #008080;"> 9</span> <span style="color: #800000;">div</span>{<span style="color: #008000;">/*</span><span style="color: #008000;">设置好div位置后，设为隐藏</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">10</span> <span style="color: #ff0000;">　　background-color</span>:<span style="color: #0000ff;"> rgba(242, 242, 242, 0.7)</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">　　position</span>:<span style="color: #0000ff;"> absolute</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">　　margin-top</span>:<span style="color: #0000ff;"> -203px</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">　　display</span>:<span style="color: #0000ff;"> none</span>;
<span style="color: #008080;">14</span> }
<span style="color: #008080;">15</span> <span style="color: #008000;">/*</span><span style="color: #008000;">出现bug位置</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">16</span> <span style="color: #800000;">img:hover + div</span>{<span style="color: #008000;">/*</span><span style="color: #008000;">鼠标浮动到img，让后面紧跟的div的display样式改为显示block</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">17</span> <span style="color: #ff0000;">　　display</span>:<span style="color: #0000ff;"> block</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">　　cursor</span>:<span style="color: #0000ff;"> pointer</span>;
<span style="color: #008080;">19</span> }
<span style="color: #008080;">20</span> <span style="color: #800000;">span</span>{
<span style="color: #008080;">21</span> <span style="color: #ff0000;">　　display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">22</span> <span style="color: #ff0000;">　　margin-bottom</span>:<span style="color: #0000ff;"> 15px</span>;
<span style="color: #008080;">23</span> <span style="color: #ff0000;">　　margin-left</span>:<span style="color: #0000ff;"> 70px</span>;
<span style="color: #008080;">24</span> }
<span style="color: #008080;">25</span> <span style="color: #800000;">span:nth-of-type(1)</span>{
<span style="color: #008080;">26</span> <span style="color: #ff0000;">　　margin-top</span>:<span style="color: #0000ff;"> 50px</span>;
<span style="color: #008080;">27</span> }

Think about the process of mouse floating. As soon as the mouse reaches the img, the div will be displayed. However, please note that after the div is displayed, although the mouse still appears to be within the area of ​​the picture, the element of the mouse hover has changed to the appearing div, so At this time, the div will continue to return to display: none;, and the cycle will continue to flash.
So you need to add a style, that is, float the mouse to the div, and also change the display style of the div to block. You can directly add the code where the bug occurs (add ‘,div: hover’), the code is as follows:

<span style="color: #800000;">img:hover + div, div : hover</span>{<span style="color: #ff0000;">
　　display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
　　cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}

This way the photo floating effect will be perfect~

If there are any errors, please correct them!