Изменение стиля другого элемента

[Guest CBE4KuH]

Вопрос следующий. Есть две ячейки таблицы. При наведении на первую из них цвет её бэкгрунда должен поменяться. Но это понятно как сделать. Вопрос в том, что при наведении на вторую ячейку необходимо, чтобы поменялся цвет бэкграунда и первой и второй. Как это сделать?

Проще говоря, если кому-то не понятно. То при наведении мышкой на один элемент, менялся стиль другого элемента.

Заранее спасибо!

[Vlad]

Здесь только JS использовать. Каждой ячейке прописывать свой id и в скриптах указывать

<td id="col1" onmouseover="document.getElementById('col2').style.background = 'red'">Ячейка 1</td>

<td id="col2" onmouseover="document.getElementById('col1').style.background = 'red'">Ячейка 2</td>

Все это через функцию конечно же надо оформить.

[Guest CBE4KuH]

Здесь только JS использовать. Каждой ячейке прописывать свой id и в скриптах указывать

<td id="col1" onmouseover="document.getElementById('col2').style.background = 'red'">Ячейка 1</td>

<td id="col2" onmouseover="document.getElementById('col1').style.background = 'red'">Ячейка 2</td>

Все это через функцию конечно же надо оформить.

Проблема в том, что мне надо, чтобы при снятии мышки с объекта его состояние возвращалось в исходное. Если всё это писать на JS, то функеция onmouseout глючная и при резком рывке мышкой не срабатывает...

[Ogalig]

Пример на вскидку:

<div class="div1">

<div class="div2"></div>

</div>

CSS стили:

.div1

{

background-color:White;

}

.div2

{

background-color:Gray;

}

.div1:hover .div2

{

background-color:Green;

}

Основной недостаток этого метода в том что первый див должен быть родителем второго. Но, в принципе, второй див можно сдвинуть абсолютным или относительным позиционированием.

[Guest CBE4KuH]

Пример на вскидку:

<div class="div1">

<div class="div2"></div>

</div>

CSS стили:

.div1

{

background-color:White;

}

.div2

{

background-color:Gray;

}

.div1:hover .div2

{

background-color:Green;

}

Основной недостаток этого метода в том что первый див должен быть родителем второго. Но, в принципе, второй див можно сдвинуть абсолютным или относительным позиционированием.

Спасибо большое... Ответ на вопрос уже близок. Скрипт в принципе работает, но при наведении на первый див меняет стиль только второго... А надо, чтоб и первого и второго...

[Guest CBE4KuH]

Ответ на свой же вопрос уже нашёл. Так что последний пост считать не актуальным... Теперь усложнаем задачу... Реально ли при наведении на один элемент CSS'ом вывести во втором текст (не стиль его менять, а просто записать туда какую-нить строку).

[Ogalig]

Добавь:

.div1:hover

{

background-color:Green;

}

или можно вообще так извратиться:

.div1:hover, .div1:hover .div2

{

background-color:Green;

}

и это не скрипт

Записать одними CSS нереально, только вставками скриптов. Легче поместить текст в какой-нибудь тег и менять параметр display у него

[Guest CBE4KuH]

Спасибо. Натолкнули на тропу решения проблемы... Буду мучаться... А вообще, чтоб понятно было... Хочу сделать систему оценивания файла. Т.е. Есть 10 звёзд по горизонтали. И если вести мышкой слева направо, то как только мышка попадает на след звезду менять цвет этих звёзд. Так сказать последовательная замена цвета звёздочек при захвате их мышкой. Причём ещё справа выводится текст (5 звёзд или 2 звезды. В зависимости от того сколько звёзд накрыла мышка). Конечно, прекрасно понимаю что всё это проще было сделать на JavaScript, но есть одно большое НО. Функция onmouseout глючная и при резком рывке мышкой не срабатывает. Вот и приходится изголяться... ))))

[Ogalig]

Мне кажется, что логичнее было бы сделать чтобы пользователь кликал на нужной звезде, а не проводил бы мышью. В таком случае он может поставить минимальную или максимальную оценку случайно, просто быстро проведя мышью над какой-либо звездой.

[Guest CBE4KuH]

Оценка будет считаться поставленной только после нажатия на нужной звезде...

Вот щас капался и возник такой вопрос... Почему не работает параметр width? Вот код...

.first

{

background-color: Red;

display: inline;

position: relative;

width: 10px;

}

.second

{

background-color: Gray;

display: inline;

position: relative;

top:-15px;

}

.first:hover .second

{

background-color: Green;

z-index: 5;

}

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

<div class="first">

<div class="second">

dfghdhdh

</div>

sdfdff

</div>

[ZoNT]

display: inline;

width: 10px;

Почита про инлайновые элементы.

[Guest Fominsa]

display: inline;

width: 10px;

Почита про инлайновые элементы.

http://www.komodomedia.com/blog/2007/01/cs...r-rating-redux/

тут описан метод создания рейтинга на звездах