Смена цвета - HTML и CSS

Krasi · 31.07.2010, 11:17

Два прямоугольника в виде меню, один под другим. Это же две вкладки-ссылки, на обоих есть текст. Пользователь наводит мышь на любой прямоугольник, и в этот момент меняется как цвет самого этого прямоугольника, так и цвет текста в нем. Как это проще сделать на css? (Уводит мышь - цвет становится прежним)

MrJenika · 31.07.2010, 12:44

A:hover Определяет стиль для ссылки при наведении на нее мышью.
То есть берёшь 2 прямоугольника (например при помощи списка)
Прописываешь каждому стиль ссылки то есть фон, цвет текста
потом этому же классу стиль
.my_class a:hover {
фон - уже другойцвет ;
цвет текста - тоже уже отличный от предыдущего
}

Krasi · 02.08.2010, 09:46

Вот так не хочет:

Код HTML:

<div id=menue style="position:absolute; top:-400; left:60%; z-index: 2;">
<table border="0" bordercolor="black" cellspacing="0" cellpadding="14" width="140" id="onhref1"><tr>
<td  class="link1">
<a onmouseover="window.status='Ссылка 1' ;return true" HREF="./mes.php" class="link1">Входящие</a></td></tr>
<tr><td class="link1">
<a onmouseover="window.status='Ссылка 2' ;return true" HREF="./mes.php?out=1" class="link1">Исходящие</a></td></tr>
</table>
</div>

Код:

#onhref1 {
font-size: 15px;
}
#onhref1 .link1 {color: gray;}
#onhref1 .link1:hover {color: #nogray;}
#onhref1 a.link1 {color: white;}
#onhref1 a.link1:hover {color: #bef574;}

Понятно, почему, но как доработать, хз.

Magneto · 03.08.2010, 09:53

html:

Код:

<!doctype html>
<html><head>
	<title>Смена цвета</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
			<link rel="stylesheet" type="text/css" href="style.css" />
</head><body>
	<table>
		<tr>
			<td>
				<a href="#">Входящие</a>
			</td>
		</tr>
		<tr>
			<td>
				<a href="#">Исходящие</a>
			</td>
		</tr>
	</table>
</body></html>

css:

Код:

@charset "utf-8";

*{
	margin:0;
	padding:0}

td{
	width:200px;
	height:50px;
	text-align:center}

td a{
	height:100%;
	display:block;
	border:1px solid #333;
	font:24px/50px arial;
	color:#fff;
	text-decoration:none;
	background:#ccc}

td a:hover{
	color:#9f9;
	background:#999}

Скачать документ

Посмотреть как выглядит

Cone · 06.08.2010, 21:38

Можно проще
<td OnMOuseOver="this.style.background= 'silver';this.style.color='green';" OnMOuseOut="this.style.background=' ПРЕЖНИЙ';this.style.color='ПРЕЖНИЙ' ;" ></td>

В место ПРЕЖНИИ прописываешь тот цвет который изначально был!

Magneto · 07.08.2010, 14:07

Cone - это ветка HTML и CSS

P.S. обработчиков OnMOuseOver и OnMOuseOut в JavaScript не существует

Cone · 07.08.2010, 17:02

Цитата:

Сообщение от Magneto

Cone - это ветка HTML и CSS

P.S. обработчиков OnMOuseOver и OnMOuseOut в JavaScript не существует

НУ ВОТ ТАК ТОГДА

<style>

#MCH{
width:200;
height:30;
border;1 solid red;
background-color:silver;
text-align:center;
text-decoration:none;
}

#MCH A:HOVER {
color:white;
background-color:black;
width:200;
height:30;
text-decoration:none;
}

a:link{
color:yellow;
text-decoration:none;
}

a:active{
color:yellow;
text-decoration:none;
}

a:hover(
color:white;
text-decoration:none;
}

a:visited(
color:yellow;
text-decoration:none;
}

</style>
<body>

<div id=MCH><div><a href=#> hi the world </a></div></div>

</body>

Krasi · 10.08.2010, 19:00

Я придумал попроще:

Код:

#menka {
list-style: none;
border-right:1px solid #999;
padding:0px 0px;
width:150px;
}
#menka a  {
display:block;

background: gray;
height:40px;
text-indent:20px;
font-family: Arial;
font-size: 17px
}

#menka a.link1 {color: white;}
#menka a.link1:hover {background: white;color: gray;}
#menka a.link2 {color: white;}
#menka a.link2:hover {background: white; color: gray;}

+

Код:

<ul id="menka">
<li><a HREF="./mes.php" class='link1'>Входящие</a></li>
<li><a HREF="./mes.php?out=1" class='link2'>Исходящие</a></li>
</ul>

Хотя это почти тоже самое. Но задавать свойства тегов мне не удобно.

31.07.2010, 11:17	#1
Krasi Форумчанин Регистрация: 12.02.2010 Сообщений: 787	Смена цвета Два прямоугольника в виде меню, один под другим. Это же две вкладки-ссылки, на обоих есть текст. Пользователь наводит мышь на любой прямоугольник, и в этот момент меняется как цвет самого этого прямоугольника, так и цвет текста в нем. Как это проще сделать на css? (Уводит мышь - цвет становится прежним) Мой сайт

31.07.2010, 12:44	#2
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	A:hover Определяет стиль для ссылки при наведении на нее мышью. То есть берёшь 2 прямоугольника (например при помощи списка) Прописываешь каждому стиль ссылки то есть фон, цвет текста потом этому же классу стиль .my_class a:hover { фон - уже другойцвет ; цвет текста - тоже уже отличный от предыдущего } webinmd.com

07.08.2010, 14:07	#6
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	Cone - это ветка HTML и CSS P.S. обработчиков OnMOuseOver и OnMOuseOut в JavaScript не существует Последний раз редактировалось Magneto; 07.08.2010 в 15:27.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Смена цвета формы	Rin	Общие вопросы Delphi	2	07.12.2009 23:15
Смена цвета.	Stranger333	Общие вопросы Delphi	6	07.10.2009 21:14
Смена цвета в ListCtrl	assasin	Общие вопросы C/C++	0	22.08.2009 01:13
смена цвета строки dbgrid - ?	Evgenii	БД в Delphi	3	04.07.2009 07:57
смена цвета ячейки если...	zetrix	Microsoft Office Excel	0	30.10.2006 19:06

06.08.2010, 21:38	#5
Cone Форумчанин Регистрация: 05.08.2010 Сообщений: 127	Можно проще <td OnMOuseOver="this.style.background= 'silver';this.style.color='green';" OnMOuseOut="this.style.background=' ПРЕЖНИЙ';this.style.color='ПРЕЖНИЙ' ;" ></td> В место ПРЕЖНИИ прописываешь тот цвет который изначально был!