jquery - 显示带有文本 :hover? 的图像的最简单方法是什么

Question

我正在尝试显示 image (公司 Logo 150 x 100 像素)在 text:hover 上当用户访问公司名称 时。图片应显示在名称的右侧。

我不知道我是否可以用 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>

Answer 1

这可以通过 CSS3 轻松实现:

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

注意:图片的路径是相对于CSS文件的

这是最基本的解决方案。图像将从右侧 float 公司名称。您想要更精致的造型吗？

但是如果您还想支持 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;
}