Question

当我悬停图形时，我想显示我的图像标题（例如图像名称）。

这是我的HTML：

<div class="thumbnail-grid flex">
    <a href="#" class="flex-item">
        <figure class="i1">
            <figcaption class="hide"> caption blabla
                <img src="img/view.png"/> 
            </figcaption>
        </figure>
    </a>
</div>

我尝试在Javascript中创建一个函数：

var text = document.querySelector('figcaption');

document.querySelector('figure').onMouseOver = function() {
    text.classList.remove('hide');
}

document.querySelector('figure').onMouseOut = function() {
    text.classList.add('hide');
}

在我的CSS中，我将.hide设置为display：none;但我的功能不起作用。

有人可以帮帮我吗？

现场演示：http://jsfiddle.net/e27Dt/613/

Answer 1

使用jquery尝试此操作。

$(".caption").hide();
$(".flex-item").hover(function(){
$(".caption").toggle();
});

标题是figcaption的类。当你悬停flex项时，标题将被切换。

Answer 2

如果可以，我只用css看http://jsfiddle.net/5qq9fz9r/

HTML

<div id="figure">
<img src="http://placekitten.com/300/301"/>
<div id="name">NAME</div>
</div>

CSS

#name{
overflow:hidden;
height:0;
text-align:center;
top:0;
position:absolute;
background-color:black;
color:white;
width:300px;
transition:2s;
}

#figure img:hover ~ #name{
height:80px;
}

Answer 3

使用jQuery：

<强> HTML

<figure>
    <img src="http://www.nnsheriff.org/img/placeholder/blogpost-placeholder-100x100.png" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure>
    <img src="http://www.nnsheriff.org/img/placeholder/blogpost-placeholder-100x100.png" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig2. - A view of the pulpit rock in Norway.</figcaption>
</figure>

<强> CSS

figcaption {
    display:none;
}

<强> SCRIPT

$("figure").on({
    mouseenter: function () {
        $(this).find($("figcaption")).css("display", "block");
    },
    mouseout: function () {
        $(this).find($("figcaption")).css("display", "none");
    }
});

Fiddle Demo

在悬停父级上切换可见性子项

3 个答案: