Question

我正在研究this site，我的目标是添加以下功能：

当鼠标悬停在单个图像上时，我想显示标题中包含的标题。
交互应从彩条过渡并具有相同的背景

我认为仅使用CSS可能是可以实现的，但是我无法看到标记的工作方式。任何有关方向的建议或要点都将不胜感激。

Answer 1

a > h3 {
    width: 100%;
    display: block;
    position: absolute;
    bottom: -1.5em;
    color: white;
    background-color: #993434;
    padding: 0.4em;
    box-sizing: border-box;

    -webkit-transition: all 300ms ease-in;
        -moz-transition: all 300ms ease-in;
        -ms-transition: all 300ms ease-in;
        -o-transition: all 300ms ease-in;
        transition: all 300ms ease-in;
}

a:hover > h3 {
    bottom: 0;
}

Answer 2

试试这个jQuery：

$(function() {
    $('img').hover(function() {
        var title = $(this).attr('title');
    }, function() {
    });
});

Answer 3

您可以使用标题内的div和background-image（标题）制作h1;然后使用:hover伪类将标题的不透明度从0更改为1。

HTML：

<div>
    <h1>Title Here</h1>
</div>

CSS：

div {
    background-image: url('image_here.jpg');
}

h1 {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}

p:hover {
    opacity: 1;
}

JS Fiddle Example

显示元素悬停时的标题

3 个答案: