:hover в <td>

Derik · 10.03.2006

Подскажите как создать эффект ховер для ячейки.

есть css для ссылок все работает:

Код:

#navlink			  {
						   color:white;
						   }
a.#navlink:hover {
						   color:#33C;
						   text-decoration: none;
						   }

а вот для ячейки нехочет, не могу понять как сделать, задаю в хтмл типа
<td class id="navlink"> с классом где меняется бекграунд но не хотит меняться=(
Нужна ячейка чтобы при наведении мышки менялся фон, в ячейке ссылка она меняется по своему классу (как в коде выше). Очень хочется сделать.

v0rbis · 10.03.2006

если я понял что тебе нужно, то лови:

<code>
<td class="off" onmouseout="this.className='off'" onmouseover="this.className='on'">
</code>

а в css делаешь соответствующие стили с бекграундами

faust · 10.03.2006

Young, ты всё неправильно делаешь.

в хтмл пишешь:

Код:

<td class="class">

в css пишешь:

Код:

.class td:hover {
color:#33C;
text-decoration: none;
}

Вот и всё. И если не будет работать, проверь цвет, он должен быть нормальной длины вообще-то.

deMone · 10.03.2006

IE такую вещь не поймёт. А вот с onmouse* действий вполне правильно.

Derik · 12.03.2006

v0rbis сказал(а):
если я понял что тебе нужно, то лови:

<code>
<td class="off" onmouseout="this.className='off'" onmouseover="this.className='on'">
</code>

а в css делаешь соответствующие стили с бекграундами

2V0rbis, скажи плз чуток не понял тут, в td class= "мы какой класс пишем?", с маусовером спасибки я их писал а к классам не привязывался=) просто не доходило. Т.е. как я понял в этой строке получается три разных класса (для тд, для 1го мауса и второго) или нет? Потому как я в стилях прописал ток один класс для ячейки, и повторил его с ховером с изменением бекграунда.
2Creator, прошу не закрывать, мне кажется модеру просто стоит не по теме перенести в трэш. Хотя твое слово последнее. Кто рангом старше тот и прав=)))) У мня просто тут трабла, ноут мой домашний греться сильно стал вот и отнес его в сервис, инет ток на работе.

Creator · 13.03.2006

Код:

2Creator, прошу не закрывать, мне кажется модеру просто стоит не по теме перенести в трэш. Хотя твое слово последнее. Кто рангом старше тот и прав=)))) У мня просто тут трабла, ноут мой домашний греться сильно стал вот и отнес его в сервис, инет ток на работе.

Для меня главное, что бы проблема была решена

Все посты не по теме удалил.

А теперь по теме:

Самый просто способ на мой взгляд это прописать, что то вроде:

Код:

<td onmouseover="this.style.background='#F6F6F6'" onmouseout="this.style.background='#EAECEB'">

Однако есть и другой способ:

Код:

<html>

<head>
  <title></title>
  <style type="text/css">
		#navlink
		{
		background: #F6F6F6;
		color:white;
		width: 100%;
		height: 100%;
		}
		#navlink:hover {
		background: #696969;
		color:white;
		text-decoration: none;
		}
  </style>
</head>

<body>

<table>
  <tr>
	  <td width="100px" height="100px"><a href="3" id="navlink">sadasd</a></td>
  </tr>
</table>

</body>

</html>

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

v0rbis · 13.03.2006

держи:

<ul id="TopMenu">
<li class="off" onmouseout="this.className='off'" onmouseover="this.className='on'">
<b>Настройки</b>
<ul>
<li><a href="rcv.php">E-mails</a></li>
</ul>
</li>

</ul>

CSS:

#TopMenu li.off ul {
display: none;
}
#TopMenu li.on ul {
display: block;
}

Derik · 15.03.2006

v0rbis сказал(а):
держи:

<ul id="TopMenu">
<li class="off" onmouseout="this.className='off'" onmouseover="this.className='on'">
<b>Настройки</b>
<ul>
<li><a href="rcv.php">E-mails</a></li>
</ul>
</li>

</ul>

CSS:

#TopMenu li.off ul {
display: none;
}
#TopMenu li.on ul {
display: block;
}

Спасибо огроменное, буду пробовать думаю тут уже сам дойду=0))) Ой у меня терь ранг НАЧИНАЮЩИЙ=))))

:hover в <td>

Derik

Well-Known Member

v0rbis

selfcoded

faust

Well-Known Member

deMone

Злой страшный дядька

Derik

Well-Known Member

Creator

Administrator

v0rbis

selfcoded

Derik

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей