Home > Web Front-end > HTML Tutorial > img's hover event flashes

img's hover event flashes

WBOY
Release: 2016-10-10 11:40:54
Original
2119 people have browsed it

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><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><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">3</span>   <span style="color: #0000ff;"><</span><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><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>
Copy after login

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> }
Copy after login

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>;
}
Copy after login

This way the photo floating effect will be perfect~

If there are any errors, please correct them!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template