Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Добавление/удаление класса (https://javascript.ru/forum/events/33552-dobavlenie-udalenie-klassa.html)

goooooch 27.11.2012 17:19
Добавление/удаление класса
 
Всем доброго дня.

Есть такой html-код (в упрощенном виде):
<div id="block1" onMouseOver="hoverClass('block2');">текст1</div>
<div id="block2">текст2</div>

Нужно, чтобы
1. при наведении курсора на div#block1 к div#block2 добавлялся класс .active
2. когда убираем курсор с div#block1 у div#block2 убирался класс .active

Первую часть я сделал, со второй никак.
function hoverClass(theID) 
{ 
if(document.getElementById(theID).className != "active")
{
document.getElementById(theID).className += "active";
}
}


В общем нужна помощь.

vadim5june 27.11.2012 17:29 
document.getElementById(theID).className ="";

danik.js 27.11.2012 17:34
тут ниче нету :)

goooooch 27.11.2012 18:54
Цитата:
Сообщение от vadim5june (Сообщение 218272) 
document.getElementById(theID).className ="";

function hoverClass(theID) 
{ 
if(document.getElementById(theID).className != "active")
{
document.getElementById(theID).className += "active";
}
else
{
document.getElementById(theID).className += "active";
}
}



<div id="block1" onMouseOver="hoverClass('block2');" onMouseOut="hoverClass('block2');">текст1</div>
<div id="block2">текст2</div>

Вы это имеете в виду?

vadim5june 27.11.2012 19:25 
function hoverClass(theID,n) 
{ 
if(n==1)
{
document.getElementById(theID).className = "active";
}
else
{
document.getElementById(theID).className = "";
}
}


<div id="block1" onMouseOver="hoverClass('block2',1);" onMouseOut="hoverClass('block2',2);">текст1</div>
<div id="block2">текст2</div>

danik.js 27.11.2012 21:23 
<div id="block1" onMouseOver="hoverClass('block2',1);" onMouseOut="hoverClass('block2',2);">текст1</div>
<div id="block2">текст2</div>
<script>
var block1 = document.getElementById('block1');
var block2 = document.getElementById('block2');

block1.onmouseover = function(){
    block2.className = 'active';
}
block1.onmouseout = function(){
    block2.className = '';
}
</script>



или, если нужно тупо менять css, то проще в тыщу раз:
<div id="block1" onMouseOver="hoverClass('block2',1);" onMouseOut="hoverClass('block2',2);">текст1</div>
<div id="block2">текст2</div>
<style>
    #block1:hover + #block2{
        color: red;
    }
</style>

danik.js 27.11.2012 21:28 
<div id="block1" onMouseOver="toggleActive('block2',1);" onMouseOut="toggleActive('block2',0);">текст1</div>
<div id="block2">текст2</div>



function toggleActive(id, isActive) {
    document.getElementById(id).className = isActive ? 'active' : '';
}


Часовой пояс GMT +3, время: 22:02.