懸停在圖像上顯示圖像旁邊的文本

我試圖在光標位於圖像上時在圖像旁邊顯示文本。我發現許多代碼顯示文字在圖像上，但有人可以給我一個代碼來做到這一點？我想這代碼，但它顯示的文本圖像懸停在圖像上顯示圖像旁邊的文本

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

來源

2012-07-09 manu

首先嚐試一下你自己的東西。 – SVS 2012-07-09 09:28:21

或者您可以添加使用title屬性的懸停文本的提示樣式。但你有什麼嘗試？ – Liquid 2012-07-09 09:29:44

我嘗試了一些東西，（圖片上顯示的文字），並嘗試分離文字並將其顯示在圖片旁邊，但它不起作用 – manu 2012-07-09 09:34:41

上述取決於你如何讓你的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。

來源

2012-07-09 11:55:33

哪裏是完整的html？ – 2012-07-10 06:01:00

非常感謝你幫助在css – manu 2012-07-10 08:59:04

標記的小變化作爲答案，如果它可以幫助你.. – 2012-07-10 11:37:01

懸停在圖像上顯示圖像旁邊的文本

回答

相關問題