Знатокам CSS. Задачка

18 сентября 2006 г.

RSS

Дневник » Вёрстка сайтов: CSS, HTML, LESS

Вот задачка, которую я так и не смог решить. Если кто-то ткнет носом в ошибку, буду очень признателен.

Итак, у нас есть простая html-страничка. В ней необходимо сделать так, чтобы все ссылки, при наведении курсора, оказывались в рамочке (зеленой). Но при этом, все изображения, заключенные в ссылки, оказывались в другой рамке (синей).

Вот html-код:

<html><head><title>Тест</title>
<style>
img {border: none;}
a, a:visited {text-decoration: none;}
a:hover {border: 3px green solid;}
a:hover img {border: 3px blue solid;}
</style>
</head><body>
<a href="#">ссылка</a>
<a href="#"><img width="100" height="100" src=""></a>
</body></html>

Казалось бы всё должно работать как надо, однако при наведении курсора получается такая картина (FireFox):

Наведение курсора

То есть отображаются две рамки...

Внимание, вопрос: "Каким образом убрать с картинки зеленую рамку от ссылки?".

Еще записи по теме

Комментариев: 8

2006-09-18 в 16:14:17 | wklim#1
Тест img {border: none;} a, a:visited {text-decoration: none;} a:hover {border: 3px green solid;} a:hover img {border: 3px blue solid;} ссылка
2006-09-18 в 16:16:34 | wklim#2

е-мое, а код где?
0px" надо добавить в тег "а" для картинки
2006-09-18 в 16:18:13 | wklim#3

И что это за черепашка в моих сообщениях?
2006-09-18 в 19:35:38 | Максим#4

Ну добавить стиль к ссылке прямо в тексте, это понятно. Тут даже нет вопросов. Сейчас я пользуюсь примерно также: в таких ссылках просто указываю отдельный класс, в котором и указываю особое оформление. А вот как сделать это автоматом?

ps Черепашка - это аватарка, которая показывается, если пользователь не имеет своего аккаунта на http://gravatar.com/
2006-09-20 в 02:19:03 | saahov#5

Либо загонять картинку в div (или другой блоковый тег), либо тегу a задать класс. Примерно так:

1 вариант с дивом:
Тест img {border: none;} a, a:visited {text-decoration: none;} a:hover {border: 3px green solid;} a:hover img {border: 3px blue solid;} .no-a-border a {border: 0px;} ссылка
2 вариант с классом:
Тест img {border: none;} a, a:visited {text-decoration: none;} a:hover {border: 3px green solid;} a:hover img {border: 3px blue solid;} a.no-a-border {border: 0px;} ссылка
2007-12-07 в 06:40:21 | Антон#6

Как уже написал saahov, кроме как использовать отдельный класс или блок поверх изображения (собственно разницы нет) выхода нет, т.к. в этом случае вам надо что бы изображение дейстовало на отображение ссылки, но если задуматься, то как можно ссылку запихать в тег <img.../>, короче ни как нельзя средствами css ссылке объяснить, то, что если в ней стоит изображение надо отображаться по другому, а еще короче схема типа img a {...} - работать не будет - нет никакой логики (в html такое не реализовать)!

P.S. извините, если ошибаюсь, но помоему я все-таки прав!

2010-06-08 в 22:02:35 | vasya pupkin#7

a{border:solid 3px #fff;float:left}
img{border:solid 3px #fff;vertical-align:middle;}
a:hover{border:solid 3px red}
a:hover img{border:solid 3px green}

2011-01-23 в 09:30:01 | Михалыч#8

Тут класс не нужен, можно определить их через родителя, у линки рамка ужалась потому что она не блочная, на img так же добавить vertical-align:top; на линку float:left; или display:block; c размерами