在元素悬停时显示标题答案

【问题标题】：Display heading on element hover在元素悬停时显示标题
【发布时间】：2013-03-29 16:53:19
【问题描述】：

我现在正在开发this site，我的目标是添加以下功能：

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

我认为这可能仅使用 CSS 就可以实现，但在可视化标记的工作方式时遇到了麻烦。任何方向的建议或观点将不胜感激。

【问题讨论】：

请加个fiddle或者code，很快你就会解决问题，然后你的问题就没有历史价值了

标签： css hover

【解决方案1】：

这可以通过 CSS3 来完成。 http://jsfiddle.net/zh3EC/

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;
}

【讨论】：

我认为这正是我所追求的，但之前没有见过这种方法，谢谢！

【解决方案2】：

试试这个 jQuery：

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

【讨论】：

这行不通，因为你唯一要做的就是在悬停时创建一个变量并调用一个什么都不做的函数

【解决方案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

【讨论】：