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。

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

1 个答案: