Question

我对HTML en CSS相当新。我试图建立一个组合网站。我想要实现的是：可点击的图像，显示悬停时的工作名称（文本）。我希望有人能帮帮忙。非常感谢。

HTML：

<div id="imagelist">
                            <a href="images/tn.png"><img src="images/tn.png" alt="tn" class="hover"/><p class="text">text</p></a>
                            <a href="images/tn.png"><img src="images/tn.png" alt="tn"/></a>
                            <a href="images/tn.png"><img src="images/tn.png" alt="tn"/></a>
                            <a href="images/tn.png"><img src="images/tn.png" alt="tn"/></a>
                            <a href="images/tn.png"><img src="images/tn.png" alt="tn"/></a>
                            <a href="images/tn.png"><img src="images/tn.png" alt="tn"/></a>
                            <a href="images/tn.png"><img src="images/tn.png" alt="tn"/></a>
                            <a href="images/tn.png"><img src="images/tn.png" alt="tn"/></a>
 </div>

CSS：

#imagelist
    {
        float: left;
        font-size: 0px;
        display: inline-block;
        margin-left: 0%;
        width: 90%;
    }

#imagelist a
    {
        margin: 10px 20px 10px 0px;
        border: 0px solid transparent;
        display: inline-block;
        border-radius: 1px;
    }

#imagelist a:hover
    {
        border-color: black;
        opacity: 0.5; 
        filter: alpha(opacity=50);
    }

#imagelist .text
    {
        position: relative;
        bottomm: 30px;
        left: 0px;
        visibility: hidden;
    }

#imagelist:hover .text 
    {
        visibility:visible;
        text-color: black;
    }

Answer 1

这是一个关于bootply的简单代码：

http://www.bootply.com/90238

它使用bootstraps本机功能以及这一小部分JS

    $("[rel='tooltip']").tooltip();    

    $('.thumbnail').hover(
    function(){
        $(this).find('.caption').slideDown(250); //.fadeIn(250)
    },
    function(){
        $(this).find('.caption').slideUp(250); //.fadeOut(205)
    }
    );

图像来自http://www.bootply.com/users/sevenx

创建的示例

Answer 2

就是你想要的

＆＃13;

a>div { display: none; }
a:hover>div { display: block; }
img{width:100px;height:100px}

＆＃13;

<a><img src="/you/image" />
<div>Some text</div>
</a>

＆＃13;

Answer 3

这是一个CSS-Only版本。添加为新答案，因为这两个帖子都适当地回答了问题。

http://jsfiddle.net/3Pghz/3/

#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>

悬停时可点击图像上的文字

3 个答案:

就是你想要的