да я вроде писал пример.
вот рабочий вариант:
<div class="text_mod">
первый спан (цвет<span id="text1">просто текст</span>)
второй спан (<span id="text2" style="color: red; font-weight: normal;">ЦВЕТ :з)</span>)
<br />
<div style="height:50px;">
<ul style="width: 100px;">
<li onMouseOver="text1.innerHTML='#300'; text2.style.color='#300';" style="background: #300"></li>
<li onMouseOver="text1.innerHTML='#400'; text2.style.color='#400';" style="background: #400"></li>
<li onMouseOver="text1.innerHTML='#500'; text2.style.color='#500';" style="background: #500"></li>
<li onMouseOver="text1.innerHTML='#600'; text2.style.color='#600';" style="background: #600"></li>
<li onMouseOver="text1.innerHTML='#700'; text2.style.color='#700';" style="background: #700"></li>
<li onMouseOver="text1.innerHTML='#800'; text2.style.color='#800';" style="background: #800"></li>
<li onMouseOver="text1.innerHTML='#900'; text2.style.color='#900';" style="background: #900"></li>
<li onMouseOver="text1.innerHTML='#a00'; text2.style.color='#a00';" style="background: #a00"></li>
<li onMouseOver="text1.innerHTML='#b00'; text2.style.color='#b00';" style="background: #b00"></li>
<li onMouseOver="text1.innerHTML='#c00'; text2.style.color='#c00';" style="background: #c00"></li>
<li onMouseOver="text1.innerHTML='#d00'; text2.style.color='#d00';" style="background: #d00"></li>
<li onMouseOver="text1.innerHTML='#e00'; text2.style.color='#e00';" style="background: #e00"></li>
<li onMouseOver="text1.innerHTML='#f00'; text2.style.color='#f00';" style="background: #f00"></li>
</ul>
</div>
а здесь как мне надо, но т.к. использую айди, а не класс - всё перестает работать:
<div class="text_mod">
первый спан (цвет<span id="text1">просто текст</span>)
второй спан (<span id="text2" style="color: red; font-weight: normal;">ЦВЕТ :з)</span>)
а это добавочные которые тоже должны меняться на те же что и первый спан - (цвет<span id="text1">просто текст</span>)
<br />
<div style="height:50px;">
<ul style="width: 100px;">
<li onMouseOver="text1.innerHTML='#300'; text2.style.color='#300';" style="background: #300"></li>
<li onMouseOver="text1.innerHTML='#400'; text2.style.color='#400';" style="background: #400"></li>
<li onMouseOver="text1.innerHTML='#500'; text2.style.color='#500';" style="background: #500"></li>
<li onMouseOver="text1.innerHTML='#600'; text2.style.color='#600';" style="background: #600"></li>
<li onMouseOver="text1.innerHTML='#700'; text2.style.color='#700';" style="background: #700"></li>
<li onMouseOver="text1.innerHTML='#800'; text2.style.color='#800';" style="background: #800"></li>
<li onMouseOver="text1.innerHTML='#900'; text2.style.color='#900';" style="background: #900"></li>
<li onMouseOver="text1.innerHTML='#a00'; text2.style.color='#a00';" style="background: #a00"></li>
<li onMouseOver="text1.innerHTML='#b00'; text2.style.color='#b00';" style="background: #b00"></li>
<li onMouseOver="text1.innerHTML='#c00'; text2.style.color='#c00';" style="background: #c00"></li>
<li onMouseOver="text1.innerHTML='#d00'; text2.style.color='#d00';" style="background: #d00"></li>
<li onMouseOver="text1.innerHTML='#e00'; text2.style.color='#e00';" style="background: #e00"></li>
<li onMouseOver="text1.innerHTML='#f00'; text2.style.color='#f00';" style="background: #f00"></li>
</ul>
</div>
как видно если добавляется доп айди слова "простой текст не меняются" а должны меняться на одно и тоже (ох.. чую запутал я еще больше вас)