Как использовать событие 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 влияет только на первый (я знаю, как работают идентификаторы, так что этого следует ожидать.) Можно ли это сделать с помощью класса для всех элементов и какого -либо кода, чтобы «знать», на какой дивинг я хочу повлиять?


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