我想在图片上添加文字。我想做类似的事情
当您将鼠标悬停在图像上时,我想显示这段文字。
这是我当前的 HTML 和 CSS
.moimage {
width: 120px;
height: 176px;
float: left;
display: inline-block;
}
.covercomment {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.name {
width: 100%;
display: inline-block;
}
<div class="molist">
<img class="moimage" src="http://i.imgur.com/UU5q8FB.jpg">
<ul class="wrapper">
<li class="covercomment">
<span class="cocom">2 Comments</span>
</li>
<li class="coverLinks">
<span class="colin">2 Links</span>
</li>
<li class="coverviews">
<span class="covedlin">60 Views</span>
</li>
</ul>
<span class="name">Testing Name Here</span>
</div>
最佳答案
.moimage {
width: 120px;
height: 176px;
display: inline-block;
position: relative;
}
.name {
width: 100%;
display: inline-block;
}
.wrapper {
position: absolute;
color: white;
list-style-type: none;
z-index: 2;
top: 0;
left: 0;
}
<div class="molist">
<img class="moimage" src="http://i.imgur.com/UU5q8FB.jpg">
<ul class="wrapper">
<li class="covercomment">
<span class="cocom">2 Comments</span>
</li>
<li class="coverLinks">
<span class="colin">2 Links</span>
</li>
<li class="coverviews">
<span class="covedlin">60 Views</span>
</li>
</ul>
<span class="name">Testing Name Here</span>
</div>
关于html - 如何在图像上制作文字并在鼠标悬停在图像上时显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47969693/