Affect an element when another element is hovered

Question

How can I affect an element when another element is hovered, and the two elements are in this structure:

<div id="parent_element">
   <div id="class-open-1"></div>
   <div id="class-close-1"></div>
</div>

or they might be in this structure:

<div id="parent_element">
   <div id="div1">
      <div id="class-open-1"></div>
   </div>
</div>
<div id="parent_element"></div>
   <div id="div2"> 
      <div id="class-close-1"></div>
   </div> 
</div>

I have tried this solution which works perfectly for the first case, but does not work for the second case:

_style.innerHTML = ".class-open" + j + ":hover{ background-color: cyan; } .class-open-" + j + ":hover ~ .class-close-" + j + " { background-color: cyan; }

the j changes , so I am only hovering the classnames that have the same j

this solution works for the case one, but doesnt work for both cases. I have also tried this :

_style.innerHTML = ".class-open" + j + ":hover{ background-color: cyan; } .class-open-" + j + ":hover  .class-close-" + j + " { background-color: cyan; }

But this changes the background-color, and doesn't only hover.

I only need css or javascript to solve this, any suggestions? I am looking for a solution that works for BOTH cases.

Which element has the hover trigger, and which element should change in CSS? — roberrrt-s, Oct 16 '17 at 10:34
why are you posting "pseudo markup" instead of actual HTML? and `.class-open" + j + "` ??? is that even CSS? — Jaromanda X, Oct 16 '17 at 10:36
For the first structure you can use this https://jsfiddle.net/ua6t2v62/ However for the second structure when element are in separate parents you need to use hove on the parent or to use JS. — Krusader, Oct 16 '17 at 10:41
I want a solution for both cases, if a solution does not work for one of them, then it does not work.. and it wont work if use the same procedure -I used for the first case- on the parent! Because they dont have the same parent, yet they are in the same level of hierarchy but not siblings. Hope you get it. — Mana, Oct 16 '17 at 11:53
With the first structure, you _could_ do it in CSS only if the outer element contains those two elements only, _and_ there are no margins/paddings involved at all (meaning, hovering the parent element also means hovering one or the other child element in any case, and nothing else.) — CBroe, Oct 16 '17 at 12:02
Possible duplicate of [How to affect other elements when a div is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — Rob, Oct 16 '17 at 12:16
No, I already saw that question, my case is a bit different.. — Mana, Oct 16 '17 at 12:18

score 1 · Answer 1 · answered Oct 16 '17 at 10:41

1

You're going to need to use JavaScript mouseover or jQuery .hover(). This shows mouseover from the MDN.

myElement.addEventListener("mouseover", (event) => {
  // do something to the other element.
}

answered Oct 16 '17 at 10:41

Jason

514
5
21

Yes I think that is the only solution, as I cannot use the css selectors to solve this! Thank you – Mana Oct 16 '17 at 10:54
If my answer works for you, would you click the checkmark to accept my answer? Or at least click the up arrow if my answer helps. – Jason Oct 16 '17 at 11:56
I dont know how to hover the second element. using onmouseover(), now I only change the background color of the first element for 500 ms, but cant change the background color of the second element, and I think this solution has a low performance, because I always have to search for the second element, and I have hundreds of elements with the same className but only the digit at the end changes.. – Mana Oct 16 '17 at 12:10
Your "answer" only shows how to trigger a javascript event on hover. It does not answer how to affect another element. – Rob Oct 16 '17 at 12:44

score 1 · Answer 2 · edited Oct 16 '17 at 11:55

1

Try this friend:

     div#one
     {
     background-color:red;
     }
     div#one:hover ~ div#two
    {
    background-color:yellow;
    }

   
   <div id="one">
    ONEE
    </div>
    <div>
    SIMPLE DIV
    </div>
    <div>
    SIMPLE DIV
    </div>
    <div>
    SIMPLE DIV
    </div>
    <div>
    SIMPLE DIV
    </div>
    <div>
    SIMPLE DIV
    </div>
    <div id="two">
    two
    </div>

edited Oct 16 '17 at 11:55

Pedram

15,766
10
44
73

answered Oct 16 '17 at 10:50

Naveen Ashok

11
2

Thank you for trying to help, but this is not what I am looking for, first of all, I just want to hover on one element and another element will be hovered too, but not change the background-color forever.. Second this is not the structure of the two elements I have they are both inside one element or each one of them has a different parent node.. – Mana Oct 16 '17 at 12:06
What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! https://stackoverflow.com/help/how-to-answer – Rob Oct 16 '17 at 12:43

score 1 · Answer 3 · answered Oct 16 '17 at 13:21

if (/\bclass-/.test(target.className)) {

                var _style = document.createElement('style');
                var j = target.className.match(/\d+$/)[0];

                target.style.backgroundColor = "red";
                _style.innerHTML = ".class-close-" + j + " { background-color: red; }";

                setTimeout(function () {
                    target.style.backgroundColor = "";
                    _style.innerHTML = '.class-close-' + j + ' { background-color: ""; }';
                }, 500);

                document.head.appendChild(_style);
            }

Here is the solution I made, but still looking for the "good effect" of Hover instead of just deleting the style after the 500ms.. Hope this helps someone.

score 0 · Answer 4 · answered Oct 16 '17 at 13:02

If you can control the template code [which I believe we do in most cases], then if one element is inside other element, it can be solved just using css.

Else, if they have different parent, JS would be the direction which people have already suggested.

Affect an element when another element is hovered

4 Answers4