Question

当鼠标悬停在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>

Answer 1

将position: absolute添加到span，将position:relative添加到主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
}

<强> DEMO

Answer 2

使用标题。

<img class='img' title='Donald Duck' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>

Answer 3

如果您希望在鼠标悬停图像上显示文字。

您只需使用html图片元素的title属性

即可

例如：

当鼠标移动时，您将能够看到该文本。

希望这会有所帮助..

Answer 4

不幸的是，据我所知，你不能在图像上插入文字。

解决方法是在具有背景图像的div中使用span

#some-div{
    background-image:url('http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif');
    background-repeat:no-repeat;
}

点击此链接http://jsfiddle.net/sy6MG/

跨文本覆盖图像

4 个答案: