Как поменять стили при наведении на div?

215

21 июня 2017, 02:36

Приветствую! Просьба помочь, у меня есть класс "parent", который содержит класс "children", хочу сделать, что бы при наведении на парент, мой чилдрен исчезал, вот мой код:

var parent = document.body.getElementsByClassName("parent");
var children = document.body.getElementsByClassName("children");
for( var i = 0; i < parent.length; i++){
    parent[i].onmouseover = function () {
        children[i].style.display = "none";
    }
}

но при наведении у меня выскакивает ошибка: "Сannot read property 'style' of undefined at HTMLDivElement.parent.(anonymous function).onmouseover"

Заранее большое спасибо за помощь.

Answer 1

проблема в навешивание ивентхендлеров в данном случае, i всегда будет максимальным, то-есть будет равно parent.length, из-за этого children[i] всегда undefined

Вот кусок вроде рабочего кода:

var p = document.body.getElementsByClassName("parent"); 
var c = document.body.getElementsByClassName("children"); 
 
for (var i = 0; i < p.length; i++) { 
    addEvent(p[i], i); 
} 
 
function addEvent(element, index) {         
    element.addEventListener("mouseover", function () { 
        document.body.getElementsByClassName("children")[index].style.display = "none"; 
    }); 
};

   <div style="background-color:red" class="parent"> 
    parent 1 
</div> 
<div style="background-color:darkred" class="parent"> 
    parent 2 
</div> 
 
<div style="background-color:yellow" class="children"> 
    children 1 
</div> 
<div style="background-color:greenyellow" class="children"> 
    children 2 
</div>

ПС: почитайте про замыкания

Если элементы все-же вложенные, то этот вариант будет получше :

var p = document.body.getElementsByClassName("parent"); 
 
for (var i = 0; i < p.length; i++) { 
    p[i].addEventListener("mouseover", function () { 
        var children = this.getElementsByClassName("children"); 
        for (var i = 0; i < children.length; i++) { 
            children[i].style.display = "none"; 
        } 
    }); 
}

<div style="background-color:red;padding:5%;" class="parent"> 
    parent 1 
 
    <div style="background-color:yellow" class="children"> 
        children 1 
    </div> 
 
</div> 
<div style="background-color:darkred;padding:5%;" class="parent"> 
    parent 2 
 
    <div style="background-color:greenyellow" class="children"> 
        children 2 
    </div> 
</div>

сори что флужу, не удержался :)

Answer 2

Почему не использовать просто CSS

.parent:hover .children{
display: none
}

Если он действительно лежит в паренте

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

AJAX JSF h:inputText

Есть facelet terminologyxhtml

326

javascript

Подключение css файлов в webpack 2 (ReferenceError: ExtractTextPlugin)

Пытаюсь подключить css файл в webpack 2Для этого устанавливаю "css-loader","file-loader","less-loader","sass-loader","style-loader", "extract-text-webpack-plugin","url-loader"; создаю отдельный...

366

javascript

не работает функция click jQuery

287

javascript

Как добавлять и удалять класс по клику (jQuery)?

toggle() вырезали в 1

213