用文字顯示圖片的最簡單方法是什麼：懸停？

我試圖在text:hover上顯示image（公司徽標150 x 100像素），當用戶來到公司名稱時。圖像應顯示在名稱的右側。用文字顯示圖片的最簡單方法是什麼：懸停？

我不知道我是否可以用CSS3解決它，或者如果我需要一些jQuery的 - 我不會更喜歡。

任何想法？

我的HTML

<div class="supplier_box_top"> 
    <p class="name">Company Name</p> 
    <p class="city">Country</p> 
    <p class="info" ><a href="#" target="_blank" id="1" class="show_info_box">nfoBox</a></p> 
    <p class="site_link"><a href="javascript:void(0)">www.your-company.com</a></p> 
</div>

來源

2014-02-19 Teo

如果<img>放在公司名稱.name後，那麼你可以使用鄰近a + b或一般a ~ b同胞選擇要顯示的圖像：

img.logo { 
    display: none; 
} 

.name:hover ~ img.logo { 
    display: inline; 
}

然而，您可以將圖像放在同一段落中並使用以下內容：

<p class="name">Company Name <img src="" /></p>

.name { 
    position: relative; 
} 

.name img { 
    position: absolute; 
    left: 100%; 
    display: none; 
} 

.name:hover img { 
    display: inline; 
}

來源

2014-02-19 22:25:46

非常感謝它！ – Teo

這可以用CSS3可以輕鬆實現：

.name:hover::before { 
    content: url(your_image_url.jpg); 
    float: right; 
}

注：圖片路徑是相對的CSS文件

那是最基本的解決方案。圖片將從右側浮動公司名稱。你想要更復雜的造型嗎？

但是，如果你想也支持IE7和年紀較大，你應該添加圖像傳統的方式和風格hover一樣在上面的例子中，是這樣的：

HTML：

<div class="supplier_box_top"> 
    <p class="name"> 
     <img class="company_image" src="my_image.jpg"> 
     Company Name 
    </p> 
    <p class="city">Country</p> 
    <p class="info" ><a href="#" target="_blank" id="1" class="show_info_box">nfoBox</a></p> 
    <p class="site_link"><a href="javascript:void(0)">www.your-company.com</a></p> 
</div>

CSS：

.name .company_name { 
    display: none; 
} 
.name:hover .company_name { 
    display: block; 
    float: right; 
}

來源

2014-02-19 22:27:15 matewka

感謝您的努力，但是當我複製/過去您的代碼時，它不起作用。我想我可能會犯一些我還搞不清楚的錯誤。圖像沒有顯示懸停，但從左側開始！任何想法爲什麼會發生？ – Teo

我更新了答案。看一看。無論如何，第一個解決方案應該從一開始就運行（使用':: before'的那個） – matewka

用文字顯示圖片的最簡單方法是什麼：懸停？

回答

相關問題