asp.net - Javascript或CSS悬停在Safari和Chrome中不起作用

Question

我的图片库脚本有问题。该问题似乎仅在Safari和Chrome上出现，但如果刷新页面，我可以使其正常工作-很奇怪！

正确的功能：
画廊有一个顶部栏，如果您将鼠标悬停在顶部栏上，则会显示标题。下面是主图像。底部有另一个柱状图，与顶部柱状图相反。将鼠标悬停在它上面时，它将显示画廊的缩略图。

问题：
在Safari和Chrome中，缩略图夹不会显示。实际上，它甚至没有将其显示为活动项（或过渡）。但奇怪的是，如果您手动刷新页面，则在查看页面的其余时间中，页面将开始正常工作。离开页面返回后，再次会发生相同的错误，因此您必须执行相同的过程。

这是要查看的页面之一：
link text

这是CSS：

#ThumbsGutter {
background: url(../Images/1x1.gif);
background: url(/Images/1x1.gif);

高度：105像素；
 左：0px；
 位置：绝对；
 顶部：0px；
 宽度：754像素；
 z索引：2；
    }

#ThumbsHolder {
 display: none;
}

#ThumbsTable {
 left: 1px;
}

#Thumbs {
 background-color: #000;
 width: 703px;
}

#Thumbs ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#Thumbs ul li {
 display: inline;
}

.Thumbs ul li a {
 border-right: 1px solid #fff;
 border-top: 1px solid #fff;
 float: left;
 left: 1px;
}

.Thumbs ul li a img {
 filter: alpha(opacity=50);
 height: 104px;
 opacity: .5;
 width: 140px;
}

.Thumbs ul li a img.Hot {
 filter: alpha(opacity=100);
 opacity: 1;
}

这是JavaScript：

//Variables

var globalPath =“”;

var imgMain;
var gutter;
var持有人；
var thumbs;
var loadingImage;
varholderState;
var imgCount;
var imgLoaded;
var captionHolder;
var captionState = 0;
var captionHideTimer;
var captionHideTime = 500;
var thumbsHideTimer;
var thumbsHideTime = 500;

$（document）.ready（function（）{
    //加载变量
    imgMain = $（“＃MainImage”）;
    captionHolder = $（“＃CaptionHolder”）;
    天沟= $（“＃ThumbsGutter”）;
    持有人= $（“＃ThumbsHolder”）;
    thumbs = $（“＃Thumbs”）;
    loadingImage = $（“＃LoadingImageHolder”）;

//Position Loading Image
loadingImage.centerOnObject(imgMain);

//Caption Tab Event Handlers
$("#CaptionTab").mouseover(function() {
    clearCaptionHideTimer();
    showCaption();
}).mouseout(function() {
    setCaptionHideTimer();
});

//Caption Holder Event Handlers
captionHolder.mouseenter(function() {
    clearCaptionHideTimer();
}).mouseleave(function() {
    setCaptionHideTimer();
});

//Position Gutter
if (jQuery.browser.safari) {
    gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 89) + "px");
} else {
    gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px");
}
//gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px");
//gutter.css("left", imgMain.offset().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - gutter.height()) + "px");

//Thumb Tab Event Handlers
$("#ThumbTab").mouseover(function() {
    clearThumbsHideTimer();
    showThumbs();
}).mouseout(function() {
    setThumbsHideTimer();
});

//Gutter Event Handlers
gutter.mouseenter(function() {
    //showThumbs();
    clearThumbsHideTimer();
}).mouseleave(function() {
    //hideThumbs();
    setThumbsHideTimer();
});

//Next/Prev Button Event Handlers
$("#btnPrev").mouseover(function() {
    $(this).attr("src", globalPath + "/Images/GalleryLeftButtonHot.jpg");
}).mouseout(function() {
    $(this).attr("src", globalPath + "/Images/GalleryLeftButton.jpg");
});

$("#btnNext").mouseover(function() {
    $(this).attr("src", globalPath + "/Images/GalleryRightButtonHot.jpg");
}).mouseout(function() {
    $(this).attr("src", globalPath + "/Images/GalleryRightButton.jpg");
});

//Load Gallery
//loadGallery(1);

}）;

函数loadGallery（galleryID）{
    //隐藏支架
    holderState = 0;
    holder.css（“ display”，“ none”）;

//Hide Empty Gallery Text
$("#EmptyGalleryText").css("display", "none");

//Show Loading Message
$("#LoadingGalleryOverlay").css("display", "inline").centerOnObject(imgMain);
$("#LoadingGalleryText").css("display", "inline").centerOnObject(imgMain);

//Load Thumbs
thumbs.load(globalPath + "/GetGallery.aspx", { GID: galleryID }, function() {
    $("#TitleHolder").html($("#TitleContainer").html());
    $("#DescriptionHolder").html($("#DescriptionContainer").html());

    imgCount = $("#Thumbs img").length;
    imgLoaded = 0;

    if (imgCount == 0) {
        $("#LoadingGalleryText").css("display", "none");
        $("#EmptyGalleryText").css("display", "inline").centerOnObject(imgMain);

    } else {
        $("#Thumbs img").load(function() {
            imgLoaded++;

            if (imgLoaded == imgCount) {
                holder.css("display", "inline");

                //Carousel Thumbs
                thumbs.jCarouselLite({
                    btnNext: "#btnNext",
                    btnPrev: "#btnPrev",
                    mouseWheel: true,
                    scroll: 1,
                    visible: 5
                });

                //Small Image Event Handlers
                $("#Thumbs img").each(function(i) {
                    $(this).mouseover(function() {
                        $(this).addClass("Hot");
                    }).mouseout(function() {
                        $(this).removeClass("Hot");
                    }).click(function() {
                        //Load Big Image
                        setImage($(this));
                    });
                });

                holder.css("display", "none");

                //Load First Image
                var img = new Image();
                img.onload = function() {
                    imgMain.attr("src", img.src);
                    setCaption($("#Image1").attr("alt"));

                    //Hide Loading Message
                    $("#LoadingGalleryText").css("display", "none");
                    $("#LoadingGalleryOverlay").css("display", "none");
                }
                img.src = $("#Image1").attr("bigimg");
            }
        });
    }
});

}

函数showCaption（）{
 如果（captionState == 0）{
  $（“＃CaptionTab”）。attr（“ src”，globalPath +“ /Images/CaptionTabHot.jpg”）;
  captionHolder.css（“ display”，“ inline”）。css（“ left”，imgMain.position（）。left +“ px”）。css（“ top”，imgMain.position（）。top +“ px”） .css（“ width”，imgMain.width（）+“ px”）。effect（“ slide”，{“ direction”：“ up”}，500，function（）{
   captionState = 1;
        }）;
    }
}

函数hideCaption（）{
 如果（captionState == 1）{
        captionHolder.toggle（“ slide”，{“ direction”：“ up”}，500，function（）{
            $（“＃CaptionTab”）。attr（“ src”，globalPath +“ /Images/CaptionTab.jpg”）;
   captionState = 0;
        }）;
    }
}

函数setCaptionHideTimer（）{
 captionHideTimer = window.setTimeout（hideCaption，captionHideTime）;
}

函数clearCaptionHideTimer（）{
 if（captionHideTimer）{
  window.clearTimeout（captionHideTimer）;
  captionHideTimer = null;
 }
}

函数showThumbs（）{
    如果（holderState == 0）{
  $（“＃ThumbTab”）。attr（“ src”，globalPath +“ /Images/ThumbTabHot.jpg”）;
        holder.effect（“ slide”，{“ direction”：“ down”}，500，function（）{
            ownerState = 1;
        }）;
    }
}

函数hideThumbs（）{
    如果（holderState == 1）{
        如果（jQuery.browser.safari）{
            holder.css（“ display”，“ none”）;
            $（“＃ThumbTab”）。attr（“ src”，globalPath +“ /Images/ThumbTab.jpg”）;
            holderState = 0;
        }其他{
            holder.toggle（“ slide”，{“ direction”：“ down”}，500，function（）{
                $（“＃ThumbTab”）。attr（“ src”，globalPath +“ /Images/ThumbTab.jpg”）;
                holderState = 0;
            }）;
        }

}

}

函数setThumbsHideTimer（）{
 thumbsHideTimer = window.setTimeout（hideThumbs，thumbsHideTime）;
}

函数clearThumbsHideTimer（）{
 if（thumbsHideTimer）{
  window.clearTimeout（thumbsHideTimer）;
  thumbsHideTimer = null;
 }
}

函数setImage（image）{
    //显示加载图片
    loadingImage.css（“ display”，“ inline”）;

var img = new Image();
img.onload = function() {
    //imgMain.css("background","url(" + img.src + ")").css("display","none").fadeIn(250);
    imgMain.attr("src", img.src).css("display", "none").fadeIn(250);
    setCaption(image.attr("alt"));

    //Hide Loading Image
    loadingImage.css("display", "none");
};
img.src = image.attr("bigimg");

}

函数setCaption（caption）{
 $（“＃CaptionText”）。html（标题）;
 // alert（$（“＃CaptionText”）。html（））;
 / *
    如果（caption.length> 0）{
        $（“＃CaptionText”）
   .css（“ display”，“ inline”）
   .css（“ left”，imgMain.position（）。left +“ px”）
   .css（“ top”，imgMain.position（）。top +“ px”）
   .css（“ width”，imgMain.width（）+“ px”）
   .html（标题）;

    $("#CaptionOverlay").css("display", "inline")

.css（“ height”，$（“＃CaptionText”）。height（）+ 36 +“ px”）
   .css（“ left”，imgMain.position（）。left +“ px”）
   .css（“ top”，imgMain.position（）。top +“ px”）
   .css（“ width”，imgMain.width（）+“ px”）;
    }其他{
        $（“＃CaptionText”）。css（“ display”，“ none”）;
        $（“＃CaptionOverlay”）。css（“ display”，“ none”）;
    }
 * /
}

请任何人可以帮助，将不胜感激！

提前致谢。

贾斯汀

Answer 1

我使用的是Chrome 4.1.249.1064，顶部栏工作正常，我看到的标题没有刷新页面。
在Firefox 3.6.3中相同，一切正常
与Safari 4.0.3相同，一切正常