CSS: a: изображение при наведении курсора без фона?

ProgramBox

CSS: a: изображение при наведении курсора без фона?

Post author:admin
Запись опубликована:10 мая, 2023
Post category:Вопросы по программированию

#css #hover

#css #наведите

Вопрос:

У меня есть цвет фона на моих ссылках (при наведении курсора, в стиле rails). И у меня есть изображение внутри a-тега, которое я не хочу иметь фоном при наведении курсора.

Я пытался

 a:hover img{ background-color: #fff; }

но это ничего не дает. Как мне исключить img-теги внутри a-тегов из наведения?

Спасибо, MrB

редактировать: jsFiddle

http://jsfiddle.net/rasvf/1/

В примере: «google» имеет красный фон при наведении курсора мыши, как и предполагалось. Но когда вы наводите курсор на изображение, это также происходит. Предполагается, что у него не должно быть фона при наведении.

1. Не включая их в первую очередь?

2. Вы пропускаете a: в вашем примере это опечатка? a:hover img{ background-color: #fff; }

3. О, the: Я забыл. Тем не менее, это есть в моем коде. Что такое jsFiddle?

4. Миф: Как мне не включать их в первую очередь?

5. @MrB: посмотри на jsfiddle.net . Вы можете опубликовать свой пример исходного кода, чтобы другие могли лучше понять вашу концепцию, проблемы и т.д.

Ответ №1:

если я вас правильно понял, я думаю, вы пытаетесь сделать что-то вроде этого:

 a:hover img{ visibility: hidden; }

или

 a:hover img{ display: none; }

Редактировать

В таком случае вы хотите:

 a:hover img {background-color: transparent;}

Пример размещен на:http://jsfiddle.net/6qwJy

1. Извините, нет. Я просто хочу, чтобы у изображения не было фона при наведении курсора мыши, как я хочу, чтобы ссылки были.

2. a: изображение при наведении курсора { цвет фона: прозрачный; }

3. Это то, что я ввел, но это не работает. Изображение по-прежнему имеет фон при наведении курсора мыши.

4. background-color:transparent только частично реализовано в IE6, поэтому это решение не будет работать для этого браузера.

5. @andyb: Оказывается, я немного ошибся в своих рассуждениях (о том, почему это не сработало). Это работает в IE6. Делайте из этого что хотите: fiddle.jshell.net/kp4ZK/show/light

Ответ №2:

Трудно понять ваш пример. Допустим, у меня есть этот фрагмент HTML:

 <a class="foo" href="#"><img src="bar.gif"/> Click me</a>

затем с помощью этих правил стиля

 a#foo:hover { background-color: blue; }
a#foo img { background-color: white; }

цвет фона изображения всегда будет белым, также при наведении курсора мыши.

Однако, если у вас есть фоновые изображения на элементе, который содержит вашу ссылку, и вы хотите, чтобы они отображались за изображением переднего плана, то вы не можете этого сделать. В этом случае вам придется заключить текст ссылки «Нажмите на меня» в интервал и записать в свою таблицу стилей:

 a#foo:hover span { background-color: blue; }

Это то, что ты задумал?

1. Закрыть. Текст «щелкните меня» и тег img не находятся в одном и том же a-теге. Я хочу, чтобы текст в a-tags имел:hover-background-color, но не img-теги в a-tags.

2. @MrB В этом случае добавьте атрибут class к тегам <a>, которые заключают изображение, чтобы вы могли выбрать их конкретно, например <a class=»clickableimage» href=»#»><img src=»logo2.png»></a>. Если вы не можете изменить html, попробуйте javascript $(‘a img’).parent(). Затем вы можете написать в своей таблице стилей [class ^=’clickableimage’]:hover { background-color: red; } или что-то в этом роде…

3. Я допустил ошибку в предыдущем комментарии. Я хотел сказать: если вы не можете изменить html, попробуйте $(‘a img’).parent() в javascript, чтобы найти теги <a>, которые заключают изображение, затем добавьте имя класса программно. Наконец, вы можете написать в своей таблице стилей a:not(.clickableimage):hover { background-color: red; }, чтобы конкретно настроить таргетинг только на <a> без изображения.

Ответ №3:

Ах! Я сделал это. Просто. Я просто поместил изображение без фона в другой div, а затем сделал:

 .otherdiv a:hover{ background-color: transparent; }

Ответ №4:

 a img {
    vertical-align: bottom;
}

Ответ №5:

Хорошо, вы мне не поверите, но у меня была та же проблема, что и выше, и я решил ее следующим образом:

У меня было что-то вроде этого:

<a href="#">
<img src"path/to/image.gif">
</a>

И в моем CSS у меня было:

a:hover { text-decoration: underline; }

И, поверьте мне, мне просто нужно было поместить тег ‘img’ в ту же строку, что и тег ‘a’, вот так:

<a href="#"><img src="path/to/img.gif"></a>

И это было все!!!