18 сентября 2006

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

Читали 3285 раз
Рубрика: Интернет
Навигация: Главная » WEB » Интернет

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

Итак, у нас есть простая 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>
<br /><br /><br />
<a href="#"><img width="100" height="100" src=""></a>
</body></html>

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

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

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

Если вам понравился мой блог, то вы можете подписаться на его RSS-ленту

Постоянная ссылка: http://maxsite.org/?p=100
Версия для печати

6 комментариев к “Знатокам CSS. Задачка”

wklim:
18 сентября 2006 в 14:14

Тест


img {border: none;}

a, a:visited {text-decoration: none;}

a:hover {border: 3px green solid;}

a:hover img {border: 3px blue solid;}
ссылка

wklim:
18 сентября 2006 в 14:16
е-мое, а код где?
style="border: 0px" надо добавить в тег "а" для картинки
wklim:
18 сентября 2006 в 14:18
И что это за черепашка в моих сообщениях?

Максим:
18 сентября 2006 в 17:35

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

ps Черепашка - это аватарка, которая показывается, если пользователь не имеет своего аккаунта на http://gravatar.com/

saahov:
20 сентября 2006 в 00:19

Либо загонять картинку в 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;}
ссылка

Антон:
7 декабря 2007 в 04:40

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