0

I am trying to display text next to the image when the cursor is over the image. i found many codes that display the text OVER the image but Can somebody give me a code for doing that ? i tried this code but it displays the text above the image 

<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>
4

1 回答 1

2

取决于你如何制作你的html，但这个 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。

于 2012-07-09T11:55:33.560 回答