применение a:hover

ssk · August 12, 2007

Здравствуйте.

Смену цвета ссылки при наведении я осилил. Подскажите, пожалуйста, как заставить картинку (Pic.jpg) появляться при наведении курсора на ссылку? Появиться она должна не в этой таблице, а ниже, на голом месте. IMG пришлось заключить в А тег, чтобы отображалось в IE. Нужно без скриптов и для всех браузеров (IE FF Op).

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.b { color: #FFFFFF;

font-family: Tahoma;

font-size: 13px;

text-decoration: none;

font-weight: bold;

display: block;

height: 35px;

width: 155px;

padding: 1px 7px 1px 7px;

border-left: 1px #FFFFFF solid;

}

.b:hover { background-color: #AE0000 }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Пункт меню

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Dimitry Wolotko · August 12, 2007

a.b:hover { background-image: url(111.jpg); }

———————————————————--

<td><a href="#" class="b">Пункт меню</a></td>

Ну или - так не совсем верно с точки зрения кода - но работает:

<a href="#" class="b"><td>Пункт меню</td></a>

ssk · August 12, 2007

Мммм... Я. может быть, неправильно объяснил. Нужно сделать так, чтобы при наведении на ссылку "Пункт меню" она (ссылка) не только меняла цвет бэкграунда, но и вылетала картинка в произвольном месте страницы. Место это я потом сам задам, это неважно. А то, что Вы, Дмитрий, предложили, я не совсем понял. Меня интересует вот этот кусок:

Пункт меню

*/это правильно? или нужно вставить картинку через

?/*

И применение :hover к этой конструкции. a.b:hover { background-image: url(111.jpg); } ведь просто вставит картинку в бэк ячейки таблицы. Нет?

rash · August 12, 2007

Можно попробовать так:

a.popup span {
 display: none;
}

a.popup:hover span {
 display: block;
 /* далее указываете необходимую позицию и т.д. */
}

<a class="popup">какой-то текст ссылки<span><img src="xxx" alt=" " /></span></a>

Ну это в общих чертах...

ssk · August 12, 2007

Гениально. Я изучил кучу материала по этой теме, но нигде не встречал такого способа. Я знаю, как сделать нужный эффект списками, таблицей (как у меня, но это не работает в ИЕ), скриптом, пробовал подключать библиотеку htc (если не путаю название). А тут - , блин, как все просто. Спасибо, rash.

Scrum · August 12, 2007

моно еще вот так это для EI, для оперы и мазилы все намного проще

<!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" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
/*<![CDATA[*/
table { BORDER-COLLAPSE: collapse; MARGIN: -1px; position: absolute; top: 100px; left: 200px;}
a:hover img {DISPLAY: BLOCK;}
img {DISPLAY: none;}
a:hover {BACKGROUND: #e6eaff;}
/*]]>*/
</style>
</head>
<body>
<a href="#">Link<!--[if IE 7]><!--></a><!--<![endif]-->
<!-- первое вложение -->
<table>
<tr>
<td>
<img src="#" alt="" />
</td>
</tr>
</table>
<!-- End первого вложения -->
<!--[if lte IE 6]></a><![endif]-->
</body>
</html>

ssk · August 12, 2007

Тоже хорошо, спасибо большое. Мне главное принцип было понять.

ssk · August 16, 2007

Здравствуйте.

С прошлым вопросом разобрался, все вышло здорово, но двинулся дальше и снова затык. Поможете?

Значит, меню, при наведении на пункт которого появляется картинка "menu1.jpg". А рядом, вплотную к меню стоит другая картинка - "menu-title.jpg". Вся таблица выровнена по центру и вот теперь задача: как определить появление картинки "menu1.jpg" точно над "menu-title.jpg", при любой ширине окна браузера? Я уже замучился, хотя для ФФ нашел решение ( к стилю a.menu:hover span добавляю { margin-left: столько-то; } )и все работает, но не в ИЕ. Обе картинки размером 728х444рх. Я оставил только один пункт в меню, на самом деле их 5 и общая высота меню равна высоте картинки.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">

body { margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
}

a.menu { display: block; 
 font-family: "MS Sans Serif"; 
 font-size: 14px; 
 font-weight: bold; 
 text-decoration: none; 
 text-align: left;
 color: #000000; 
 background: #BAAA78; 
 height: 88px;
 width: 185px;
 padding-left: 14px;
 padding-right 14px;
 border-bottom: 1px solid #000000;
}

a.menu span { display: none; 
}

img { border: none;
}

a.menu:hover span { display: block;
 position: absolute;
 top: 198px;
}

a.menu:hover { background-color: #FF0000; 
 color: #FFFFFF; 
}


</style>

<body>

<table align="center" cellpadding="0" cellspacing="0" style="margin-top: 48px; padding: 0px;">
 <tr>
 <td>
 <a class="menu" href="#">ААААААААААААААААААААААААААААА<span><img src="menu1.jpg"/></span></a>
 <a class="menu" href="#">ВВВВВВВВВВВВВВВВВВВВВВВВВВ<span><img src="menu2.jpg"/></span></a> 
 <a class="menu" href="#">ЦЦЦЦЦЦЦЦЦЦЦЦЦЦЦЦЦЦЦЦЦЦЦЦ<span><img src="menu3.jpg"/></span></a> 
 <a class="menu" href="#">ДДДДДДДДДДДДДДДДДДДДДДДДДД<span><img src="menu4.jpg"/></span></a> 
 <a class="menu" href="#" style=" border-bottom: none;">ЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕЕ<span><img src="menu5.jpg"/></span></a>
 </td>
 <td><img src="menu-title.jpg"/></td>
 </tr>
</table>


</body>
</html>

ssk · August 18, 2007

Правда никто не знает?

ardjuna · May 1, 2008

Почему IE то отобразит подсветку через hover, то нет.

homm · May 2, 2008

Правда никто не знает?

rash знает, он собственно уже все и написал.

Если подробнее, то вот:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	position: relative;
	font-family: Arial;
}

#menu a div{
	width: 200px;
	height: 150px;
	margin: -75px 0 0 -100px;
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
}
#menu a:hover div{
	display: block;
}
#menu a {
	padding: 4px 10px;
	border-right: 1px solid gray;
}

.green {
	background-color: green;
	color: white;}
.red {
	background-color: red;
	color: white;}
.blue {
	background-color: blue;
	color: white;}
</style>
</head>
<body>
	<div id="menu">
		<a href="#">Пункт меню <div class="green">Первая картинка</div></a>
		<a href="#">Пункт меню <div class="red">Вторая картинка</div></a>
		<a href="#">Пункт меню <div class="blue">Третья картинка</div></a>
	</div>
</body>
</html>

Tokolist · May 2, 2008

homm, нельзя вкладывать блочные элементы в строчные

rasebor · March 3, 2010

rash знает, он собственно уже все и написал.
Если подробнее, то вот:

В ИЕ6 не работает.

Sign In

применение a:hover

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information