Question

我有以下两个图像，一个是翻转图像，显示了另一个图像

/* HOVER IMG */
.hover_img a { position:static; }
.hover_img a span { position:fixed; display:none; z-index:99;}
.hover_img a:hover span { display:block; position: fixed; top: 5px; width:800px; margin-left:140px;}

  <div class="hover_img">
  <a href="link.html"><img src="http://lorempixel.com/101/101" style="border : 0;" width="120" height="30"/><span><img style="border: 5px solid #000000;border-radius: 25px; width:800px" src="http://lorempixel.com/100/100"/></span></a>
  </div>

我遇到的问题是，当移开原始图像时，如果鼠标悬停在悬停图像上方时移动得足够快，则移至悬停位置时，它将停留并且不会移除。

由于鼠标悬停图像很大，我正在寻找一种方法，如果鼠标悬停在鼠标悬停图像上，它不会显示？

Answer 1

通过弄乱跨度图像的位置，使悬停图像消失了。

.hover_img 
a:hover span {   
  display:block; 
  position: fixed; 
  top: 0%; 
  left: -100px;
  width:800px; 
  margin-left:140px;
}

https://codepen.io/edubz/pen/jeBPKe

Answer 2

使用padding-left代替20px的空白，并使用left:120px来放置span元素。

/* HOVER IMG */
.hover_img a { position:static; }
.hover_img a span { position:fixed; display:none; z-index:99;}
.hover_img a:hover span { display:block; position: fixed; top: 5px; left:120px width:800px; padding-left:20px;}

  <div class="hover_img">
  <a href="link.html"><img src="http://lorempixel.com/101/101" style="border : 0;" width="120" height="30"/><span><img style="border: 5px solid #000000;border-radius: 25px; width:800px" src="http://lorempixel.com/100/100"/></span></a>
  </div>

Answer 3

我通过添加

解决了

onmouseout =“ document.getElementById（'over6'）。style.visibility ='hidden';”“ onmouseover =“ document.getElementById（'over6'）。style.visibility ='visible';”

并给我span作为上面的id，这意味着只要您将鼠标移入和移出它，它就会显示和隐藏图像，这解决了当您将鼠标悬停在其上时仍显示过度图像的问题。

css悬停图像-保持不变

3 个答案: