Change multiples div class from another div

Question

I'm trying to change (better would be to add) a class name to multiple divs using an onmouseover function in another element. The two elements are not nested to each other so I can't (or at least don't) think I can use plain CSS to do so.

I'm simplifying the following code to make it easier to read. The actual html for the "items" is a little bit more nested. Hope this won't be an issue.

<ul id="buttons">
   <li class="a">button a</li>
   <li class="b">button b</li>
</ul>

<div id="items">
    <div class="item-a"></div>
    <div class="item-b"></div>
    <div class="item-b"></div>
    <div class="item-a"></div>
    <div class="item-b"></div>
</div>

So basically what I want to do is when I hover the "li" elements with the mouse the corresponding class in div "items" gets a class added to itself (so class "a" in buttons would add a class 'hover' to all the "item-a" classes, and so on).

I'm fairly new to JavaScript/jQuery. So far I managed to get it done using Id instead of class, but since ID must be unique it's not what I need. The code was:

onmouseover="document.getElementById('item-a').className = 'hover';"

This worked. Only one div (the first with that ID) but it worked, so I tried to change it from Id to ClassName but it didn't work.

onmouseover="document.getElementsByClassName('item-a').className = 'hover';"

and also, if the above code would work, it would change the class, while I'd prefer to add it (and then remove it with a onmouseout function)

for reference, among the lot of searching i did i also tried this link Trigger the css:hover event with js trying to adapt it to my situation:

$(window).load(function() {
 $('.a').hover(function(){
    $('.item-a').addClass('hover');
});
}

with no results.

no point trying to use `getElementById` for elements that don't have an ID. — charlietfl, Dec 23 '12 at 13:27
i should have explained myself better: i tried changing class to id, trying the getElementById and it worked (for the first one). it wasn't however what i need it because i have more than one div to change and ids must be unique. the example was to show that i tried something that partially worked and tried to adapt it to my needs. thanks anyway for your time — Luken00, Dec 23 '12 at 13:41

David Thomas · Answer 1 · 2012-12-23T13:39:59.083

4

I'd suggest:

$('#buttons li').hover(function(){
    $('.item-' + this.className).addClass('hover');
},
function(){
    $('.item-' + this.className).removeClass('hover');
});

JS Fiddle demo.

References:

edited Dec 23 '12 at 13:39

answered Dec 23 '12 at 13:24

David Thomas

249,100
51
377
410

You're very welcome indeed, I'm glad to have been of help! =) – David Thomas Dec 23 '12 at 13:43

score 1 · Answer 2 · answered Dec 23 '12 at 13:42

1

Finagle your markup a little bit and you can do it with plain CSS:

<ul id="buttons">
   <li class="a">button a</li>
   <li class="b">button b</li>
   <li class="items">
       <div class="item-a"></div>
       <div class="item-b"></div>
       <div class="item-b"></div>
       <div class="item-a"></div>
       <div class="item-b"></div>
   </li>
</ul>

.a:hover ~ li .item-a {
    background: red;
}

.b:hover ~ li .item-b {
    background: blue;
}

Demo

answered Dec 23 '12 at 13:42

bookcasey

39,223
13
77
94

nice solution. i got it working now with javascript, so i don't have to edit at all the html, but i'll save it for future reference. thanks :) – Luken00 Dec 23 '12 at 14:51

Change multiples div class from another div

2 Answers2