Question

我有以下情况

<TD><a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)"><img src="images/m2.jpg" name="Image20" width="103" height="136" border="0">Home</a></TD>

我希望Home文本显示在图像上方，例如。浮动没有图像实际上失去了onmouseof和onmouseover位置，这是可能的吗？

Answer 1

我会将图像源作为标记的背景并正确定位以节省文本空间“漂浮”

<td><a href="index-1.html">Home</a></td>

CSS

td a /* probably better to use an ID here #myAnchor */
{        
    vertical-align: top;
    height: 156px; /* padding 20px to save room for "Home" text */
    width: 103px;
    display: inline-block;
    background: url('images/m20.jpg') no-repeat 0 20px;
    text-align: center;
}

td a:hover /* probably better to use an ID here #myAnchor */
{
    background: url('images/m21.jpg');
}

Answer 2

<style>
#thisNavElement{
width:103px;
height:136px;
display:block;
text-align:center;
vertical-align:center;
background:url(images/m2.jpg);
}
#thisNavElement:hover{
background:url(images/m21.jpg);
}
</style>

<a id='thisNavElement'>Home</a>

Answer 3

在你的CSS中你可以说

#my_anchor {
  background: url(images/m21.jpg);
}

然后只需更改JavaScript / jQuery中的背景

Answer 4

作为替代解决方案，您只需将文本放在span标记中，然后使用css以任意方式定位。

<TD>
   <a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)">
      <img src="images/m2.jpg" name="Image20" width="103" height="136" border="0" />
      <span class="someclassname">Home</span>
   </a>
</TD>

Answer 5

<TD><a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)"><img src="images/m2.jpg" name="Image20" width="103" height="136" border="0"><div id='text'>Home</span></a></TD>

CSS：

#id {
position: relative;
top: -20px;
z-index: 2;
}

使用CSS定位文本以在图像上显示

5 个答案: