当鼠标悬停在 div 上时,我尝试在图像上播放跨度文本。
我正在尝试这个。
html
<div id="some-div">
<a href="#"><img class='round_border type_border' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>
<span id="some-element">Dounald
</span></a>
</div>
css 看起来像这样
<style>
#some-div{
position:relative
}
#some-element {
width:100px;
height:100px;
border: 1px solid orange;
display: none;
font-size: 10px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
text-transform: uppercase;
position: absolute;
top:0;
left:0;
background:rgba(255,79,50,.5);
color:Black !important;
margin-top:2px;
border:1px solid gray;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
#some-div:hover #some-element {
display: block;
position: relative;
cursor: pointer;
color:#FFFFFF;
}
a{
position: relative;
}
.type_border {
width: 100px;
height: 100px;
background: white;
position: absolute;
}
.round_border {
float: left;
border:1px solid gray;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
background: white;
}
</style>
最佳答案
将 position: absolute
添加到 span
并将 position:relative
添加到 main div
#some-div{
position:relative
}
#some-element {
width:80px;
border: 1px solid #ccc;
display: none;
font-size: 10px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
text-transform: uppercase;
position: absolute;
top:0;
left:0
}
关于html - 在图像上跨越文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20396266/