标题{

Question

这是我要尝试的页面：Gallery

我要做的是当你将鼠标悬停在缩略图上时，主图像前面的div会淡入并显示图像的title属性。将鼠标悬停在左侧和最顶层的图像上，标题应显示在手表上。

我尝试按照说明here但是对于第二张图片，标题没有交换，它只显示第一张图片。

另外我有点困惑在哪里为div添加fadein fadeout ......

对于这个noobish问题感到抱歉，我还在学习这个。

谢谢。

Answer 1

我认为标题会被换掉，问题是新值总是与旧值完全相同，所以只有看起来就像没有发生任何事情一样。

问题在于：

var titleString = $("#thumb").attr("title");
$("#title").html(titleString);

当您告诉它切换文本时，您总是从完全相同的元素中获取新文本：<a>元素的ID为thumb。要解决此问题，请将第一行更改为以下内容：

var titleString = $(this).find('a').attr("title");

这假设您将要在相应的<a>元素上存储要使用的标题。我添加了最后一部分，因为事实证明，该页面上的其他任何锚点都没有标题，因此如果您决定这样做，则必须通过并添加它们。

Answer 2

更改以下内容：

1

#main_view{
    background: #FFFFFF;
    left: 45%;
    margin-top: 128px;
    padding: 0 0;
    position: absolute;
}

标题{

background-color: #C7C3A5;
color: #000000;
font-family: Museo,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 150px;
left: 44%;
opacity: 0.8;
padding: 50px;
position: absolute;
top: 22%;
width: 100px;
z-index: 555;

}

删除标题为ID的div的内联样式。

在（$（“ul.thumb li”）的悬停函数中。悬停）添加以下行之后 - $（this）.css（{'z-index'：'10'}）;

var titleString = $(chis).children("a").attr("title");
$("#title").html(titleString);

Answer 3

以下代码将修复标题问题（正如其他人指出的那样）并完成淡入淡出技术。也可能不希望使用#title元素的最高值百分比。

$(document).ready(function(){
    //Larger thumbnail preview 
    var $title = $('#title');
    $("ul.thumb li, ul.thumb2 li").hover(
        function() {
            var $this = $(this);
            $this.css({'z-index' : '10'});
            $this.find('img').addClass("hover").stop()
                .animate({
                    marginTop: '-50px', 
                    marginLeft: '-50px', 
                    top: '50%', 
                    left: '50%', 
                    width: '100px', 
                    height: '100px',
                    padding: '0px' 
                }, 200);
            $title.stop().animate({opacity:0.4}, 200, function(){
                $title.html($this.children('a').attr('title')).animate({opacity:0.8}, 500);
            });
        },
        function() {
            $this = $(this);
            $this.css({'z-index' : '0'});
            $this.find('img').removeClass("hover").stop()
                .animate({
                    marginTop: '0', 
                    marginLeft: '0',
                    top: '0', 
                    left: '0', 
                    width: '75px', 
                    height: '75px', 
                    padding: '0px'
                }, 400);
    });
    //Swap Image on Click
    $("ul.thumb li a, ul.thumb2 li a").click(function() {
        var mainImage = $(this).attr("href"); //Find Image Name
        $("#main_view img").attr({ src: mainImage });
        return false;        
    });
});

http://jfcoder.com/test/hoverfade.html

显示DIV内图像的标题属性

3 个答案:

标题{