Question

我正在寻找一种方法，以便当我将鼠标悬停在图像上时，标题或alt标签会显示在图像的中央（淡入/淡出），图像的不透明度也会降低。

我看了很多，但我发现大多数javascript插件都会创建一个工具提示，而这不是我想要的。

感谢您的任何建议。

编辑：忘记提及，图像需要保留在一个简单的ul列表中，没有额外的div或任何环绕每个图像的东西。他们还将使用rel attr进行shadowbox或类似工作。

Answer 1

你可以做这样的事情

$('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/

Answer 2

这只是对如何使用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();
  }
);

Answer 3

您可以使用ile所拥有的内容，但您可以使用addClass，而不是添加div。只需使用li作为可维护对象。

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

我不是专业的javascript人，但这会给你一个想法。

在图像悬停时，在中心显示标题/ alt标签

3 个答案: