Работа с HOVER

Slashka · May 12, 2008

Доброе время суток! Подскажите, пожалуйста, новичку, а то уже намучалась вся..

Хочу сделать 2 блока так, чтобы при наведении мыши на блок?1 менялся его цвет (всего блока, а не только текста, как у меня получается) и одновременно блока?2.

html:

<!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=windows-1251" />
<link href="style_of_page_menu.css" rel="stylesheet" type="text/css" />
<title>Page2</title>
</head>
<body>
 <div class="col1">
 <b>Заголовок ?1</b>
 </div>
 <div class="col2">
 <b>Заголовок ?2</b>
 </div>


</body>
</html>

css:

.col1, .col2
{
float:left; 
width:160px; 
height:40px;
padding:5px 10px;
border:solid 1px;
}

.col1 b:hover {text-decoration: none; background-color: #FFCCFF;}
.col2 b:hover {text-decoration: none; background-color: #99CCFF;}

Может можно сделать какую-нибудь конструкцию типа:

.col1 b:hover{background-color: #FFCCFF; .col2 {background-color: #99CCFF;}}

???

ZoNT · May 12, 2008

только джаваскрипт...

Azadi · May 12, 2008

<!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=windows-1251" />
<link href="style_of_page_menu.css" rel="stylesheet" type="text/css" />
<title>Page2</title>
<style type="text/css">
.col1, .col2 {
 float:left; 
 width:160px; 
 height:40px;
 /**/
 text-align:center;
 line-height:40px;
 /**/
 padding:5px 10px;
 border:#000 solid 1px;
}
#wrap {
 float:left;
 background:#ccc;
}
#wrap:hover div.col1 {text-decoration: none; background-color: #FFCCFF;}
#wrap:hover div.col2 {text-decoration: none; background-color: #99CCFF;}
</style>
</head>
<body>
 <div id="wrap">
 <div class="col1">
 <b>Заголовок ?1</b>
 </div>
 <div class="col2">
 <b>Заголовок ?2</b>
 </div>
 </div>

</body>
</html>

Не будет работать в 6-м ослике.

Slashka · May 13, 2008

Спасибо большое!

guvatara · May 13, 2008

жабу выложить? а только сегодня написал.

<!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>
<style type="text/css">
<!--
.style1 {
background-color:#3b3b3b;
width:640px;
height:410px;
}

.style2 {
background-color:#003b5b;
width:640px;
height:410px;
}
-->
</head>

<body>
<div class="style1" onmouseover="this.className='style2'" onmouseout="this.className='style1'">
</div>
</body>
</html>

Slashka · May 14, 2008

выложи, пожалуйста!

Slashka · May 14, 2008

И еще вопрос:

Я использовала HOVER на блоке, т.е. при наведении мыши на него, меняется цвет. Когда мышь отвожу, цвет меняется на исходный.

Как сделать, чтобы он обратно не менялся?!

Если просто при наведении так нельзя, то как сделать, чтобы после КЛИКА на блок цвет обратно не менялся?

Задано было так:

.col4 div:hover ul{ #6699FF}

Sign In

Работа с HOVER

Question

Slashka

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

ZoNT

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

Slashka

Link to comment

Share on other sites

guvatara

Link to comment

Share on other sites

Slashka

Link to comment

Share on other sites

Slashka

Link to comment

Share on other sites

Обсуждения

Forums

Important Information