在图像悬停，在中心

我在寻找一种方法，这样，当我悬停在图像，标题或ALT标记被显示在图像的中央显示标题/ ALT标记（进/出衰落），图像也不透明。在图像悬停，在中心

我环顾四周相当多，但大多数的JavaScript插件，我发现创建一个工具提示，它是不是我要找的。

感谢您的任何建议。

编辑：忘了提，图像需要停留在简单的UL列表，没有多余的div或任何包装的每个图像周围。他们也将使用相关的shadowbox或类似的东西。

2011-12-28 malicedix

你可以做这样的事情

$('ul li img').hover(
    function(){ 
     $(this).css('opacity','.5'); 
     var a = $(this).attr('alt'); 
     $(this).parent().append('<div class="title">' + a + '</div>'); 
    }, 
    function(){ 
     $(this).css('opacity','1'); 
     $(this).next().remove('.title'); 
    } 
);

（快速和肮脏的jQuery绝对可以提高）

CSS

ul li img{ 
    position:relative; 
} 

.title{ 
    position:absolute; 
    z-index:1000; 
    top:50%; 
    bottom:50%; 
    right:50%; 
    left:50%; 
    width:100px; 
    border-radius:5px; 
    background:red; 
}

（CSS也可以改善...但这给你一个想法）

实施例：http://jsfiddle.net/dgKne/

来源

2011-12-28 23:21:49

谢谢，这项工作非常出色。我只需要弄清楚如何让CSS把标题放在每个图像的中心。使用提供的CSS，它位于页面的中心。我已经把它放在每张图片的左下角。如果它使.title相对，我可以将它放置在图像的中心，但它会让所有其他图像在徘徊时移出位置（它是一个方形图像的网格）。 – malicedix 2011-12-29 00:46:02

这仅仅是如何可以解决在使用jQuery这个问题的方法一般描述：）

1放入一个div的图像，并给这个div类（例如：altHover）
2）悬停，先挑选ALT标签，并将其存储在变量：var title = $("em").attr("title");
3）在同一悬停功能，使新的div里面徘徊在它里面的div和打印ALT标签：

$(".altHover").hover(
    function() { 
    $(this).append($("<div class='altText'>" + title +"</div>")); 
    }, 
    function() { 
    $(this).find(".altText").remove(); 
    } 
);

来源

2011-12-28 21:45:05

谢谢，有一个方法通过具有只在一个简单的UL列表中的图像，以执行此操作。原因是，客户端应该使用CMS将图像添加到页面，并且它的设置方式不会以这种方式添加div。应该在第一篇文章中提到，抱歉。 – malicedix 2011-12-28 22:57:45

这是可能的。只需更改.append中的部分即可选择所需内容。如果你不能在这里发布html代码来处理它 – 2011-12-28 23:01:12

你可以使用有什么ILE，但而不是添加div，y你可以使用addClass。只需使用li作为可移动对象。

$("li.picture").hover(
    function(){ 
     $(".selected_result").removeClass("selected_result"); 
     $(this).addClass("selected_result"); 
    } 
);

我不是亲JavaScript的人，但这会给你一个想法。

来源

2011-12-28 23:09:46 KayleL

在图像悬停，在中心

回答

相关问题