在图像悬停时，在中央显示标题/ alt标记 [英] On image hover, display title/alt tag in center

问题描述

我正在寻找一种方式，这样当我将鼠标悬停在图像上时，标题或alt标记将显示在图像的中心（淡入/淡出），并且图像的透明度也会降低。

我查了很多，但是我发现大多数javascript插件都创建了一个工具提示，而这不是我正在寻找的。

感谢您的任何建议。编辑：忘了提及，图片需要留在一个简单的ul列表中，没有额外的div或任何包裹每个图像的东西。他们也会使用相对于shadowbox或类似的方式。

解决方案

你可以做这样的事情。 b

  $（'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 {
位置：相对; 
} 
 
 .title {
 position：absolute; 
 z-index：1000; 
 top：50％; 
底部：50％; 
右：50％; 
剩下：50％; 
 width：100px; 
 border-radius：5px; 
背景：红色; 
} 
  

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

示例： http://jsfiddle.net/dgKne/

I'm looking for a way so that when I hover over an image, the title or alt tag is displayed in the center of the image (fading in/out), with the image also lowered in opacity.

I've looked around quite a bit but most javascript plugins I find create a tool tip and it's not what I'm looking for.

Thanks for any suggestions.

EDIT: Forgot to mention, the images need to stay in a simple ul list, no extra divs or anything wrapping around each image. They will also use the rel attr for shadowbox or similar.

解决方案

You could do something like this

$('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');
    }
);

(Quick and dirty jQuery could definitely be improved)

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 could also be improved... but this gives you an idea)

Example: http://jsfiddle.net/dgKne/

这篇关于在图像悬停时，在中央显示标题/ alt标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！