Question

我有以下代码，但当“上一个”或“下一个”按钮出现时，当我在按钮上执行mouseover事件时，它会闪烁。

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Portfolio</title>
     <link rel="stylesheet" href="css/global.css">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script src="js/jquery.easing.1.3.js"></script>
 <script src="js/slides.jquery.js"></script>

     </head>
     <body bgcolor="#FFFFFF">
 <div id="container">
     <div id="example">
    <div id="slides">
        <div class="slides_container">
            <img src="imgs/test.gif" width="800" height="456" id="gallery_img" border="0"/>
            </div>
        <div class="prevButton" style="visibility:hidden"><a href="#" class="prev"><img src="imgs/arrow-prev.png" width="24" height="43" alt="Arrow Prev"/></a></div>
        <div class="nextButton" style="visibility:hidden"><a href="#" class="next"><img src="imgs/arrow-next.png" width="24" height="43" alt="Arrow Next"/></a></div>
         </div>
      </div>
  </div>
     <script>
        $(document).ready(function() {
        $('#gallery_img').mouseover(function() {
            $('.prevButton').css("visibility", "visible");
            $('.nextButton').css("visibility", "visible");
        });

        $('#gallery_img').mouseout(function() {
            $('.prevButton').css("visibility", "hidden");
            $('.nextButton').css("visibility", "hidden");
        });
         });
     </script>

     </body>
     </html>

Answer 1

有些浏览器倾向于不加载未在页面中显示的来源，这些来源被css规则隐藏：display:none或visibility:hidden - 或者他们的任何父母都是。这实际上是因为浏览器试图在每个网页的缓存中保留空间（出于速度/效率的原因）。

无论如何预加载（并使浏览器缓存）隐藏的东西，我可以想到2个解决方案：要么将它们加载到不隐藏但偏移的元素中（因此它们对用户不可见）或者使用Javascript接近如下。

<script type="text/javascript">
    var imgArr = ['arrow-prev.png','arrow-next.png'];
    for (var i = 0; i < imgArr.length; i++) {
        var img = new Image();
        img.src = 'imgs/' + imgArr[i];
        img.onload = function(){}; // this is dummy. not sure if it's needed
    }
</script>

我不确定这是不是你遇到了什么，但你可能想尝试一下。

编辑：只需重新阅读您的代码即可。我认为现在发生的事情是，当鼠标悬停在按钮上时，鼠标实际上是先离开图像，这会触发鼠标输出功能（然后移动鼠标后再返回鼠标悬停功能）。

Answer 2

你真的不需要JavaScript，因为你可以用纯CSS实现相同的效果：

#slides:hover div.prevButton, #slides:hover div.nextButton
{
    visibility: visible;
}

这将要求您删除div上的内联样式，因为它们将覆盖外部样式表中的任何内容以及<head>中定义的任何内容。您应该能够定义样式，例如：

div.prevButton, div.nextButton
{
    visibility:hidden;
}

HTH。

编辑： jsFiddle。

Answer 3

尝试使用此jsfiddle内容。它会对你有所帮助。 DEMO

这使用了jquery（）hover api而不是鼠标悬停。

下面是示例代码。

$(document).ready(function() {
     $("#b").hide();
     $("#a").hover(
           function(){
              $("#b").show();   
             },
           function(){
            $("#b").hide();  
             }                          
     )

 });

jQuery - 鼠标悬停时图像闪烁

3 个答案: