CODEWITHSUNDEEP
javascripthtmlcss
Mana
Mana

Reputation: 167

Affect an element when another element is hovered

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.

Upvotes: 0

Views: 1708

Answers (4)

Mana
Mana

Reputation: 167

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.

Upvotes: 1

Vishal Kaul
Vishal Kaul

Reputation: 133

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.

Upvotes: 0

Naveen Ashok
Naveen Ashok

Reputation: 11

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>

Upvotes: 1

Jason
Jason

Reputation: 534

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.
}

Upvotes: 1

Related Questions