悬停在图像上显示图像旁边的文本

Question

我试图在光标位于图像上时在图像旁边显示文本。我发现许多代码显示文字在图像上，但有人可以给我一个代码来做到这一点？ 我想这代码，但它显示的文本图像

<i><div class='element7' style='position: absolute; right:-250px; bottom: 400px; z-  index: 4;'> 
<img src='".$donnees[1]."' height='100' width='170' /></td><p style='bottom : 300px;right : 300px;'>some text : image 1 </p></i> 

<style type="text/css"> 

.element7 { 
width: 730px; 
height: 133px; 
line-height: 0px; 
color: transparent; 
font-size: 50px; 
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",  Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 200; 
text-transform: uppercase; 
-webkit-transition: all 0.1s ease; 
-moz-transition: all 0.1s ease; 
-o-transition: all 0.1s ease; 
} 

.element7 :hover { 
line-height: -20px; 
color: #fff; 
top:100px; 
left:100px; 

} 

.element7 img{ 
float: right; 
margin: 0 50px; 
} 
</style> 

Answer 1

上述取决于你如何让你的html但this DEMO作品，它只是简单的CSS。如果你的html更复杂，你可以用jQuery来做到这一点。

您在容器上悬停并显示如此的文字。

<div id="contain"> 
    <div class="fake-image"></div> 
    <div class="text">some text</div> 
</div>​ 

#contain{ 
    clear: both; 
} 

.fake-image{ 
    width: 100px; 
    height: 100px; 
    background-color: aqua; 
    float: left; 
    margin-right: 14px; 
    cursor: pointer; 
} 

#contain:hover div.text{ 
    display: block; 
} 

.text{ 
    background-color: yellow; 
    float: left; 
    display: none;  
}​ 

编辑

看你的HTML，你提供的是没有意义的，因为你得到了一个</td>但没有开始标记，如果这是一个表的一部分，它的更好的你应该张贴它的完整的HTML。