Question

我正在创建一个网站，并有一些包含图片的Div标签。我还有一个Content Div，用于描述每个图像。

但是，选择照片时（如翻转图像）。我希望Content Div能够显示相关图像的描述。

你能帮帮我们吗？

Answer 1

使用jQuery事件处理程序，您可以使用mouseenter和mouseleave事件完成所需的操作：

$("#image").on("mouseenter",function()
{
    $("#content").html("<your description goes here>");
});

$("#image").on("mouseleave",function()
{
    $("#content").html("");
});

查看这个JSFiddle，它显示了上面的代码：

http://jsfiddle.net/1u3u050o/

另外，如果您不熟悉，我建议您阅读更多关于jQuery的内容。这是一个JavaScript库，在这种情况下为你做了很多繁重的工作。

Answer 2

您可以使用:before或:after伪元素content属性获取HTML属性的值。

很遗憾，:before和:after伪元素无法与img标记一起使用，因此您必须使用父元素。

这是一种方式：

＆＃13;

.wrap {
    position: relative;
}
.wrap:before {
    content: attr(title);
    display: none;
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 10px;
    color:#fff;
    z-index: 1;
    background: rgba(0,0,0,0.4);
}

.wrap:hover:before {
    display: block;
}

＆＃13;

<div class="wrap" title="Some title text"><img src="http://placehold.it/400x150"></div>

＆＃13;

我可以让内容出现在一个分区内;当一个单独的Div与光标一起悬停？

2 个答案: