Question

我收到了以下代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{url}/app/tpl/skins/{skin}/hk/style/topstoryimages.css" type="text/css" />
    <title>News Images</title>
</head>
<body>

<center class="midden">

    <h1 class="titel">title</h1>
    <p>text<br>
    text</p>
    <img src="{url}/static/topstory/1atap.gif" class="topstoryimages">
    <img src="{url}/static/topstory/1model.gif" class="topstoryimages">
    <img src="{url}/static/topstory/accesories.gif" class="topstoryimages">
    <img src="{url}/static/topstory/alhambra.gif" class="topstoryimages">
    <img src="{url}/static/topstory/alhambra2.gif" class="topstoryimages">
    <img src="{url}/static/topstory/art.gif" class="topstoryimages">
    <img src="{url}/static/topstory/AU_TS_TheTake_v1.jpg.gif" class="topstoryimages">
    <img src="{url}/static/topstory/AU_Winter.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Badgewidget_300x187.gif" class="topstoryimages">
    <img src="{url}/static/topstory/bakgrunder.png" class="topstoryimages">
    <img src="{url}/static/topstory/Bat_hulk_habbo.png" class="topstoryimages">
    <img src="{url}/static/topstory/BeachBunny2.gif" class="topstoryimages">
    <img src="{url}/static/topstory/bigbro_ts1.gif" class="topstoryimages">
    <img src="{url}/static/topstory/bigbro_ts2.gif" class="topstoryimages">
    <img src="{url}/static/topstory/bigbro_ts3.gif" class="topstoryimages">
    <img src="{url}/static/topstory/bionicle_topStory_300x187v2.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Bolly_TopStoryScene2.png" class="topstoryimages">
    <img src="{url}/static/topstory/Bolly_TopStoryScene3.png" class="topstoryimages">
    <img src="{url}/static/topstory/BollyTopStory_stage5.gif" class="topstoryimages">
    <img src="{url}/static/topstory/BRPT_TopStory_sabatina_300x187.png" class="topstoryimages">
    <img src="{url}/static/topstory/BRPT_TopStory_Summer.png" class="topstoryimages">
    <img src="{url}/static/topstory/CasinoTS.png" class="topstoryimages">
    <img src="{url}/static/topstory/Childline_Topstory.gif" class="topstoryimages">
    <img src="{url}/static/topstory/chiuhuahuatopstory.gif" class="topstoryimages">
    <img src="{url}/static/topstory/christmasbus.gif" class="topstoryimages">
    <img src="{url}/static/topstory/christmassanta.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Claireclarke.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Classicparade.gif" class="topstoryimages">
    <img src="{url}/static/topstory/creditspromo.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Diner_300x187_Topstory_dancefloor.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Diner_300x187_Topstory_enter.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Diner_300x187_Topstory_open.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Diner_300x187_Topstory_shakes.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Diner_300x187_Topstory_waitress.gif" class="topstoryimages">
    <img src="{url}/static/topstory/DK_dune_topstory.jpg" class="topstoryimages">
    <img src="{url}/static/topstory/double_promo_topstory_300x187.gif" class="topstoryimages">
    <img src="{url}/static/topstory/easter.gif" class="topstoryimages">
    <img src="{url}/static/topstory/easter2.gif" class="topstoryimages">
    <img src="{url}/static/topstory/eating.gif" class="topstoryimages">
    <img src="{url}/static/topstory/envy_TopStory_300x187.gif" class="topstoryimages">
    <img src="{url}/static/topstory/ES_super_Top_story_New01.png" class="topstoryimages">
    <img src="{url}/static/topstory/ES_super_Top_story_New02.png" class="topstoryimages">
    <img src="{url}/static/topstory/ES_super_Top_story_New03.png" class="topstoryimages">
    <img src="{url}/static/topstory/ES_super_Top_story_New04.png" class="topstoryimages">
    <img src="{url}/static/topstory/ES_super_Top_story_New05.png" class="topstoryimages">
    <img src="{url}/static/topstory/ES_super_Top_story_New06.png" class="topstoryimages">
    <img src="{url}/static/topstory/exe_tstories_300x187.gif" class="topstoryimages">
    <img src="{url}/static/topstory/facebook.gif" class="topstoryimages">
    <img src="{url}/static/topstory/fatherhabbo_300x187_girl.gif" class="topstoryimages">
    <img src="{url}/static/topstory/festival1.gif" class="topstoryimages">
    <img src="{url}/static/topstory/festival2.gif" class="topstoryimages">
    <img src="{url}/static/topstory/festival3.gif" class="topstoryimages">
    <img src="{url}/static/topstory/festival4.gif" class="topstoryimages">
    <img src="{url}/static/topstory/festival5.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Footballevent.png" class="topstoryimages">
    <img src="{url}/static/topstory/fotboll1.gif" class="topstoryimages">
    <img src="{url}/static/topstory/fotboll2.gif" class="topstoryimages">
    <img src="{url}/static/topstory/fotboll3.gif" class="topstoryimages">
    <img src="{url}/static/topstory/frank_topstory_300x187.gif" class="topstoryimages">
    <img src="{url}/static/topstory/getitcard.png" class="topstoryimages">
    <img src="{url}/static/topstory/gym.gif" class="topstoryimages">
    <img src="{url}/static/topstory/H4D_Topstory.gif" class="topstoryimages">
    <img src="{url}/static/topstory/habbo_mall_topstory2.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Habbo_Rasmus_topstory.gif" class="topstoryimages">
    <img src="{url}/static/topstory/Habbo_Topstory1_2.gif" class="topstoryimages">
    <img src="{url}/static/topstory/happyaniversary.gif" class="topstoryimages">
    <img src="{url}/static/topstory/hc_news1.png" class="topstoryimages" style="width: 300px; height: 187px;">
    <img src="{url}/static/topstory/hejmatematik_celeb.png" class="topstoryimages">
    <img src="{url}/static/topstory/horse.gif" class="topstoryimages">
    <img src="{url}/static/topstory/ikuturso_hiddentreasure_topstory.png" class="topstoryimages">
    <img src="{url}/static/topstory/ikuturso_McMurpysTrip_topstory.gif" class="topstoryimages">
    <img src="{url}/static/topstory/infobus.gif" class="topstoryimages">
    <img src="{url}/static/topstory/ironik_TopStory_300x187.gif" class="topstoryimages">
    <img src="{url}/static/topstory/issabrown.gif" class="topstoryimages">
    <img src="{url}/static/topstory/IT_HB_OL_SONOHORA_030408_topstory_01.png" class="topstoryimages">
    <img src="{url}/static/topstory/IT_HB_OL_SONOHORA_030408_topstory_02.png" class="topstoryimages">
    <img src="{url}/static/topstory/IT_HB_OL_SONOHORA_030408_topstory_03.png" class="topstoryimages">
    <img src="{url}/static/topstory/jansale_1_plastic.gif" class="topstoryimages">
    <img src="{url}/static/topstory/jansale_1_plastic.gif" class="topstoryimages">
    <img src="{url}/static/topstory/jansale_3_lodge.gif" class="topstoryimages">
    <img src="{url}/static/topstory/jansale_4_pura.gif" class="topstoryimages">
    <img src="{url}/static/topstory/jansale_5_area.gif" class="topstoryimages">
    <img src="{url}/static/topstory/jansale_6_mode.gif" class="topstoryimages">
    <img src="{url}/static/topstory/JP_Sky_TS_v1.gif" class="topstoryimages">
    <img src="{url}/static/topstory/JP_Smile_TopStory_v1.gif" class="topstoryimages">
    <img src="{url}/static/topstory/kingcorp_300x187_A.gif" class="topstoryimages">
    <img src="{url}/static/topstory/kingcorp_300x187_B.gif" class="topstoryimages">
    <img src="{url}/static/topstory/KIR_Topstory.gif" class="topstoryimages">
    <img src="{url}/static/topstory/limitednews.png" class="topstoryimages">
    <img src="{url}/static/topstory/madball_TS_1_teaser.gif" class="topstoryimages">
    <img src="{url}/static/topstory/madball_TS_2_action.gif" class="topstoryimages">
    <img src="{url}/static/topstory/" class="topstoryimages">

CSS：

.topstoryimages {
    width: 300px; 
    height: 187px;
}

img:hover {
    display: block
}

.titel {
    background-color: #9DA2A3;
    font-family: Geneva, Tahoma, Verdana, sans-serif;
    margin-left: 35px;
    margin-right: 35px;
    border-radius: 6px;
}

.midden p {
    background-color: #9DA2A3;
    color: white;
    margin-top: 20px;
    margin-left: 35px;
    margin-right: 35px;
    border-radius: 6px;
}

img {
    border-radius: 10px;
}

我想要的是，当我将鼠标悬停在图像上时，图像名称将显示在图像本身上。我怎么能这样做？

Answer 1

您可以使用title属性。

<img src="{url}/static/topstory/1atap.gif" class="topstoryimages" title="image 1">

当您将鼠标悬停在图像上并且不移动鼠标时，工具提示会显示标题文字。

如果您希望能够复制工具提示，则可以使用tooltipster等库。有关codepen的工作示例：http://codepen.io/anon/pen/rLmwxv

Answer 2

您需要稍微调整一下代码，但我在这里只有一个CSS解决方案：

http://codepen.io/rkieru/pen/VjbbNJ

在此示例中，您使用data-title元素上的数据属性（我选择了figure），并应用::after伪类来创建一个半透明的黑盒子。在图的底部，为内容提取attr(data-title)。

我试图消除对包装器的需求，但<img>对使用::before和::after

等伪类有限制

悬停时显示图像名称

2 个答案: