0

カーソルが画像の上にあるときに、画像の横にテキストを表示しようとしています。画像の上にテキストを表示するコードをたくさん見つけましたが、誰かがそれを行うためのコードを教えてもらえますか？このコードを試しましたが、画像の上にテキストが表示されます

<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が、このデモは機能しますが、単純な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 に答える