Динамическое изменение цвета фона ячеек

30.05.2012, 00:00. **Показов** 8361. **Ответов** 6

Author24 — интернет-сервис помощи студентам

Здравствуйте. Собственно озадачился недавно созданием сайта но в html полный нуб. Код пишу при помощи DreamWeaver, самоучителя и интернета. Сайт получается статическим, но хочется внести динамические элементы. И тут я засел. Вот кнопка которая у меня получилась:

HTML5

<td width="182" align="center" bgcolor=#FFFFFF onMouseOver="this.style.background='#330000'" onMouseOut="this.style.background='#FFFFFF'"><a href="link1.htm" class="стиль3" style="text-decoration:none"><span style="color:#330000" onmouseover="this.style.color='#FFFFFF'" onmouseout="this.style.color='#330000'">Main</span></a></td>

А теперь проблема. Кнопка меняет фон и цвет текста НО при попадании курсора на кнопку изменившийся фон перекрывает название до тех пор пока четко в это название не попасть курсором.
Как сделать так чтобы при наведении курсора надпись и фон срабатывали одновременно? Пробовал вот как здесь http://www.winsov.ru/css004.php но код почему-то не сработал. Помогите пожалуйста новичку плииииииииз.

@newJS · 30.05.2012, 07:12

если скриптом, то можно так, даже в ие6 работает, что само по себе уже чудо

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>345</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<style type="text/css">
 
#myStyle td {background:white; cursor:pointer;}
#myStyle td a {text-decoration:none; color:lime;}
 
 
</style>
 
</head>
 
<body>
 
 
<table border="0" cellpadding="7" cellspacing="0" id="myStyle">
<tr><td>
<a href="#">ссылка в никуда</a>gggggg<br>wwwww
</td></tr></table>
<script type="text/javascript">
(function(){
var obj, k;
obj=document.getElementById("myStyle").getElementsByTagName("td");
k=obj.length;
while(k--){
obj[k].onmouseover=over;
obj[k].onmouseout=out;};
 })();
 
function over(){
this.style.background="pink";
this.getElementsByTagName("a")[0].style.color="red";
 };
function out(){
this.style.background="white";
this.getElementsByTagName("a")[0].style.color="lime";
 };
</script>
 
 
</body>
</html>

30.05.2012, 08:15

ого спасибо newJS, но это дюже круто для меня. я то и в гипертексте слаб а тут ява! может что-то по проще есть???

Donald28 · 30.05.2012, 10:34

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

ого спасибо newJS, но это дюже круто для меня. я то и в гипертексте слаб а тут ява! может что-то по проще есть???

я бы на твоем месте все-таки использовал бы CSS стили. Описывать стили внутри тэгов - это мувитон.

CSS

/* свойство класса cell (для ячейки таблицы) */
.cell{ background: #fff;
        color: #300;}
          /* свойство класса cell (для ячейки таблицы) при наведении на неё мышкой*/
.cell:hover { background: #300;
                 color: #fff;}
 
/* свойство класса linkcell (для ссылки) */
.linkcell, .linkcell:hover, .linkcell:active, .linkcell:visited { text-decoration:none }

HTML5

1
2
3

<td width="182" align="center" class="cell">
     <a href="link1.htm" class="стиль3 linkcell">Main</a>
</td>

должно работать

@newJS · 30.05.2012, 20:35

Да я тоже кинулся на ховере делать, вот только облом.

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

.cell:hover { background: #300; color: #fff;}

ссылка не перекрашивается, только простой текст.

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

а тут ява!

не ява, а яваскрипт, это разные языки

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

может что-то по проще есть???

ну извини, проще не получилось

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

Описывать стили внутри тэгов - это мувитон.

angemon, прислушайся, это хороший совет

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

это дюже круто для меня

просто используй готовое и пытайся понять как оно работает, там того скрипта...

Donald28 · 30.05.2012, 20:38

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

ссылка не перекрашивается, только простой текст.

Может получится если сделать ссылку блочной?

CSS

1	.linkcell {display:block;}

@newJS · 30.05.2012, 20:44

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

Может получится если сделать ссылку блочной?

а может {display:inline-block;}
пробовать надо
оно на ховере конечно лучше

angemon
	30.05.2012, 08:15	3
	ого спасибо newJS, но это дюже круто для меня. я то и в гипертексте слаб а тут ява! может что-то по проще есть???

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	30.05.2012, 20:35	5
	Да я тоже кинулся на ховере делать, вот только облом. Сообщение от Donald28 .cell:hover { background: #300; color: #fff;} ссылка не перекрашивается, только простой текст. Сообщение от angemon а тут ява! не ява, а яваскрипт, это разные языки Сообщение от angemon может что-то по проще есть??? ну извини, проще не получилось Сообщение от Donald28 Описывать стили внутри тэгов - это мувитон. angemon, прислушайся, это хороший совет Сообщение от angemon это дюже круто для меня просто используй готовое и пытайся понять как оно работает, там того скрипта... 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	30.05.2012, 20:44	7
	Сообщение от Donald28 Может получится если сделать ссылку блочной? а может {display:inline-block;} пробовать надо оно на ховере конечно лучше 0