Внимание! Данная запись отмечена как устаревшая и/или потерявшая актуальность! Возможно автор уже передумал и теперь придерживается другой точки зрения, нежели изложенная в тексте ниже.

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

Дневник / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 10805 (84)

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

Итак, у нас есть простая 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 RSS

1wklim18-09-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;} ссылка

2wklim18-09-2006 14:16

е-мое, а код где? smile

style="border: 0px"надо добавить в тег "а" для картинки

3wklim18-09-2006 14:18

И что это за черепашка в моих сообщениях?

4Максим18-09-2006 17:35

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

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

5saahov20-09-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;} ссылка

6Антон07-12-2007 04:40

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

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

7vasya pupkin08-06-2010 20:02

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}

8Михалыч23-01-2011 07:30

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

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.

Рейтинг@Mail.ru