Как использовать событие JavaScript OnmouseOver из нескольких DOV одинакового класса? ⇐ Javascript

[Anonymous]

Я борюсь с JS, только начал переуживание после 5 -летнего перерыва. У меня есть четыре Div с одним и тем же классом, я не хочу, чтобы они все менялись одновременно, только тот, который я паряю. Когда я использую ClassName, ничего не происходит, когда я использую ID, первые переходы DIV, но на остальных четырех изменяются только первые.function HoverEvent() {

var element = document.getElementsByClassName("js");
element.classList.remove("character");
element.classList.add("character_hover");

var element = document.getElementsByClassName("js");
element.classList.remove("icon");
element.classList.add("icon_hover");

}

function HoverRemove () {

var element = document.getElementsByClassName("js");
element.classList.remove("character_hover");
element.classList.add("character");

var element = document.getElementsByClassName("js");
element.classList.remove("icon_hover");
element.classList.add("icon");

}
< /code>
html: < /p>


Title
Info here



Title
Info here



Title
Info here



Title
Info here

< /code>
css: < /p>
.character, .character_hover{
height:250px;
width:170px;
transition:.2s;
}

.character_hover{
background-color:#373f28!important;
}

.icon, .icon_hover{
background-repeat:no-repeat;
background-size:cover;
background-color:white;
margin:auto;
border-radius:10px;
transition:.2s;
}

.icon{
width:100px;
height:100px;
}

.icon_hover{
width:120px;
height:120px;
}
< /code>
Snippet (используя getElementbyId вместо classname) < /p>


function HoverEvent() {

var element = document.getElementById("character");
element.classList.remove("character");
element.classList.add("character_hover");

var element = document.getElementById("icon");
element.classList.remove("icon");
element.classList.add("icon_hover");

}

function HoverRemove() {

var element = document.getElementById("character");
element.classList.remove("character_hover");
element.classList.add("character");

var element = document.getElementById("icon");
element.classList.remove("icon_hover");
element.classList.add("icon");

}< /code>
.character,
.character_hover {
background-color: #414833;
box-sizing: border-box;
border-color: black;
border-style: solid;
border-width: 3px;
margin: 10px 10px 0 10px;
padding: 5px 10px 5px 10px;
border-radius: 5px;
}

.character,
.character_hover {
height: 250px;
width: 170px;
transition: .2s;
}

.character_hover {
background-color: #373f28 !important;
}

.icon,
.icon_hover {
background-color: white;
margin: auto;
border-radius: 10px;
transition: .2s;
}

.icon {
width: 100px;
height: 100px;
}

.icon_hover {
width: 120px;
height: 120px;
}< /code>


title
Info here



title
Info here



title
Info here



title
Info here
< /code>
< /div>
< /div>
< /p>
Я попытался использовать ClassName вместо идентификатора, что остановило все переходы от работы. ID только влияет только на первый (я знаю, как работают идентификаторы, так что этого следует ожидать.) можно ли это сделать, используя класс на всех элементах и какой -то код, чтобы «знать», на который я хочу повлиять? Что мне не хватало, так это (myfunction ( this ) и как оптимизировать этот код, не имея строки для каждого элемента. Насколько я знаю, CSS не является решением, потому что я хочу, чтобы дочерний элемент изменился, когда я наклоняю родитель, синхронно.

Подробнее здесь: https://stackoverflow.com/questions/797 ... same-class