-2

我有以下代码，但是当“上一个”或“下一个”按钮出现时，当我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>
4

3 回答 3

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>

我不确定这是否是您所遇到的，但您可能想试一试。

编辑：只需重新阅读您的代码。我认为现在发生的事情是，当您将鼠标悬停在按钮上时，鼠标实际上首先离开了图像，这使得它触发了 mouseout 功能（然后在鼠标移动后返回 mouseover 功能）。

于 2012-10-09T02:40:22.107 回答
0

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

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

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

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

HTH。

编辑： jsFiddle。

于 2012-10-09T03:11:38.157 回答
0

试试这个 jsfiddle 内容。它会帮助你。演示

这使用了 jquery() hover api 而不是鼠标悬停。

下面是示例代码。

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

 });
于 2012-10-09T03:32:39.987 回答