a:hover прописан для всех ссылок, но для класса img отдельно. И второй не работает

Mosya · June 25, 2011

Прописал для всех ссылок a:hover свойство красного фона. Потом создал отдельный класс a.img, в котором находились изображения, чтобы под ними не появлялась эта красная полоса. Но она появляется несмотря ни на что.

Gaspode · June 25, 2011

Код в студию.

ctpz · June 25, 2011

И что мы вам подскажем без кода.

Mosya · June 25, 2011

a:hover {
	background: #e02600;
	color: #fff;
	text-decoration: none;
	border-bottom: #3f4f52 solid 1px;
}

a.img:hover {
	background: none;
	text-decoration: none;
}

Gaspode · June 25, 2011

Ээм...

a.img:hover {
        border: none;
}

?

ctpz · June 25, 2011

Попробуйте ссылкам на картинках дать свой класс например a_img

.a_img{
        background: none;
        text-decoration: none;
}

Softlink · June 25, 2011

ссылки блочные?

line-height:0

блоку со ссылкой.

mishka · June 25, 2011

все работает, только вот бордер еще обнулить нужно.

Но красной полоски и небыло. Может просто класс img линке не дописали?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        a:hover {
            background: #e02600;
            color: #fff;
            text-decoration: none;
            border-bottom: #3f4f52 solid 1px;
        }
        a.img:hover {
            background: none;
            text-decoration: none;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">asdf</a>
        <a class="img" href="#"><img src="screen.jpg" width="50" height="50" alt="image description" /></a>
    </div>
</body>
</html>

Mosya · June 25, 2011

спасибо всем, кто пенял на border. прописал border: 0 и все стало нормально

Mosya · June 25, 2011

а напоследок: как можно прописать то же самое, но без класса? То есть для любого img, который находится в a применить свойства. Пробовал a:hover > img {...}; a > img:hover {...}; a:hover img {...}; a img:hover {...}; но ничего не помогло.

buddah · June 25, 2011

a:hover img http://jsfiddle.net/NZLpQ/1/

klierik · June 25, 2011

:link:hover img {
    border: 1px solid red;
}

такой вариант записи будет работать быстрее всего.

Mosya · June 26, 2011

не хочет он у меня почему-то делать такие конструкции. Но я просто прописал border:0 в a:hover и все хорошо

Gaspode · June 26, 2011

а напоследок: как можно прописать то же самое, но без класса? То есть для любого img, который находится в a применить свойства. Пробовал a:hover > img {...}; a > img:hover {...}; a:hover img {...}; a img:hover {...}; но ничего не помогло.

Дык вам надо границу у ссылки отменить же. А тут обращение к картинке внутри ссылки. Разные вещи, нэ?

buddah · June 26, 2011

:link:hover img {
    border: 1px solid red;
}
такой вариант записи будет работать быстрее всего.

А можно пруф? Интересно.

Sign In

a:hover прописан для всех ссылок, но для класса img отдельно. И второй не работает

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information