Question

当用户点击公司名称时，我试图在image上显示text:hover（公司徽标150 x 100 px）。图像应显示在名称的右侧。

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

这是最基本的解决方案。图像将从右侧浮动公司名称。你想要更复杂的造型吗？

然而如果你想支持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;
}

Answer 2

如果<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;
}

使用文本显示图像的最简单方法是什么：悬停？

2 个答案: