Какой самый простой способ показать изображение с текстом: hover?

Question

Какой самый простой способ показать изображение с текстом: hover?

0

Я пытаюсь показать image (логотип компании 150 x 100 px) в 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>

Stefan Weiss 20 фев. 2014, в 00:06

Источник

Теги:

jquery

css

css3

2 ответа

2

Это можно легко сделать с помощью 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;
}

matewka 19 фев. 2014, в 20:29

0

Спасибо за ваши усилия, но когда я копирую / пропускаю ваш код, он не работает. Я полагаю, что могу сделать какую-то ошибку, которую пока не могу понять. Изображение не показывается при наведении, а справа с самого начала на левой стороне! Есть идеи, почему это может произойти?
Stefan Weiss 19 фев. 2014, в 23:46
0

Я обновил ответ. Посмотри. В любом случае, первое решение должно работать с самого начала (тот, что с ::before )
matewka 20 фев. 2014, в 09:57

Ещё вопросы

Спасибо за ваши усилия, но когда я копирую / пропускаю ваш код, он не работает. Я полагаю, что могу сделать какую-то ошибку, которую пока не могу понять. Изображение не показывается при наведении, а справа с самого начала на левой стороне! Есть идеи, почему это может произойти?
Я обновил ответ. Посмотри. В любом случае, первое решение должно работать с самого начала (тот, что с ::before )

Hashem Qolami · Accepted Answer · 2014-02-19T21-20-00.000Z

Если <img> помещается после имени компании .name, тогда вы можете использовать смежные селекторы s a + b или general 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;
}