hover под ссылкой изображение

okunev2 · February 21, 2008

Как на css сделать, чтобы при наведении на ссылку, под ней было жирное подчеркивание, которое выводилось картинкой, может по другому?

Типа:

Slyfox · February 21, 2008

http://htmlbook.ru/content/?id=19

okunev2 · February 21, 2008

Да знаю я блин про это, линия подчеркивания тонкая, а я хочу чтобы она была в два раза толще в ИЕ и Опере, в Мозиле все гуд!

okunev2 · February 21, 2008

А на JS как это можно сделать, чтобы при наведении появлялась картинка

klierik · February 21, 2008

background ?!

makarena · February 21, 2008

Можно hover'ом, без JS

okunev2 · February 21, 2008

как?

klierik · February 21, 2008

a:hover {background: url('image_path') 0 100% repeat-x;}

Slyfox · February 21, 2008

<style type="text/css">
A { 
 text-decoration: none;
} 
A:hover { 
 border-bottom: 3px dashed #00cc33;
}
</style>
</head>
<body>
 <a href=link.html>ссылка</a>
</body>

если только слишком толстая (например 44px), то IE6 не понимает

okunev2 · February 21, 2008

a.menu2 {
 color: #2577B5; 
 font: bold 11pt Arial;
 text-decoration: none;
 border-bottom: 3px dashed #2577B5;
}

a.menu2:hover {
 color: #2577B5; 
 font: bold 11pt Arial;
 text-decoration: none;
}

Почему не пашет? И как убрать пунктир а сделать сплошную линию?

klierik · February 21, 2008

a.menu2 {
 color: #2577B5; 
 font: bold 11pt Arial;
 text-decoration: none;
}

a.menu2:hover {
 border-bottom: 3px dashed #2577B5;
}

okunev2 · February 21, 2008

нет, наоборот при наведении чтобы исчезало поддчеркивание?

makarena · February 21, 2008

Угу. И dashed поменять на solid

Slyfox · February 21, 2008

a.menu2 {
 color: #2577B5; 
 font: bold 11pt Arial;
 text-decoration: none;
}

a.menu2:hover {
 border-bottom: 3px dashed #2577B5;
}

Тут с пунктирной.

Если без пунктирной тогда

a.menu2 {
 color: #2577B5; 
 font: bold 11pt Arial;
 text-decoration: none;
}

a.menu2:hover {
 border-bottom: 3px solid #2577B5;
}

okunev2 · February 21, 2008

вот:

a.menu2 {
 color: #2577B5; 
 font: bold 11pt Arial;
 border-bottom: 3px solid #2577B5;
 text-decoration: none;
}

a.menu2:hover {
 text-decoration: none;
 border-bottom: none;
}

Slyfox · February 21, 2008

вот:

a.menu2 {
 color: #2577B5; 
 font: bold 11pt Arial;
 border-bottom: 3px solid #2577B5;
 text-decoration: none;
}

a.menu2:hover {
 text-decoration: none;
 border-bottom: none;
}

Я рад, что все получилось как нужно

okunev2 · February 21, 2008

неа, в Опере глюк!

okunev2 · February 21, 2008

наверное лучше так:

a.menu2 {
 color: #2577B5; 
 font: bold 11pt Arial;
 border-bottom: 3px solid #2577B5;
 text-decoration: none;
}

a.menu2:hover {
 text-decoration: none;
 border-bottom: 0px;
}

klierik · February 21, 2008

какой смысл писать дважды text-decoration: none; ?

читаем тут: http://loc.stack.ru/projects/CSS2/selector.html#q15

Sign In

hover под ссылкой изображение

Question

Link to comment

Share on other sites

18 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

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