Знатокам CSS. Задачка
Рубрика: Дневник -> CSS и HTML
Понедельник, 18 сентября 2006 г.
Просмотров: 2965
Подписаться на комментарии по RSS
Понедельник, 18 сентября 2006 г.
Просмотров: 2965
Подписаться на комментарии по RSS
Вот задачка, которую я так и не смог решить. Если кто-то ткнет носом в ошибку, буду очень признателен.
Итак, у нас есть простая 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):
То есть отображаются две рамки...
Внимание, вопрос: "Каким образом убрать с картинки зеленую рамку от ссылки?".
Комментариев: 7
Тестimg {border: none;}
a, a:visited {text-decoration: none;}
a:hover {border: 3px green solid;}
a:hover img {border: 3px blue solid;}
ссылка
е-мое, а код где?
style="border: 0px"надо добавить в тег "а" для картинкиИ что это за черепашка в моих сообщениях?
Ну добавить стиль к ссылке прямо в тексте, это понятно. Тут даже нет вопросов. Сейчас я пользуюсь примерно также: в таких ссылках просто указываю отдельный класс, в котором и указываю особое оформление. А вот как сделать это автоматом?
ps Черепашка - это аватарка, которая показывается, если пользователь не имеет своего аккаунта на http://gravatar.com/
Либо загонять картинку в 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;}
ссылка
Как уже написал saahov, кроме как использовать отдельный класс или блок поверх изображения (собственно разницы нет) выхода нет, т.к. в этом случае вам надо что бы изображение дейстовало на отображение ссылки, но если задуматься, то как можно ссылку запихать в тег <img.../>, короче ни как нельзя средствами css ссылке объяснить, то, что если в ней стоит изображение надо отображаться по другому, а еще короче схема типа img a {...} - работать не будет - нет никакой логики (в html такое не реализовать)!
P.S. извините, если ошибаюсь, но помоему я все-таки прав!
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}