Question

逗人，我正在使用下面的代码显示数据库中的图像列表，并在悬停时显示图像上的一些文本（也来自数据库）。我需要保留当前设置，但还要添加一个文本（来自DB），但要在图像上始终显示（静态）：

CSS：

.wrapper {
position: relative;
padding: 0;
width:100px;
display:block;
}
.text {
position: absolute;
top: 0;
color:#333;
background-color:rgba(255,255,255,0.2);
width: 500px;
font-size:18px;
height: 100%;
line-height:100px;
text-align: center;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}


.img {
z-index:1;
}

.grid {
position:relative;
float:left;
width: 500px;
height:333px;
margin-bottom: 10px;
margin-right: 10px; 
border: 0;
text-align:center;
vertical-align:middle;
}

代码：

foreach($dbrow as $row) {

?>
<div class="grid">
    <a href="<?php echo $row['hotel_url']; ?>" class="wrapper">
        <span class="text">
            <b><?php echo $row['name']; ?></b>
            <br/>
            <?php echo $row['desc_en']; ?>
            <br/>
            <i>Book Now</i>
        </span>
        <img align="center" src="<?php echo $row['photo_url']; ?>">
    </a>
</div>
<?php
}

Answer 1

为什么不简单：

.text { display: none; }
.text:hover { display: block }

Answer 2

你可以使用HTML5改变你的HTML，所以跨度保持不变（虽然我不改用它而不使用br），图像和标题都包含在HTML5图形标记下。

<a href="#">
  <span class="text">Hover text</span>
  <figure>
    <img src="#" alt="foo" width=500 height=400>
    <figcaption>
      Text underneath
    </figcaption>
  </figure>
</a>

如何使用CSS同时添加静态文本并将文本悬停在图像上？

2 个答案: