Trigger the change of an element upon hovering over another element

Question

Trigger the change of an element upon hovering over another element

Is there a way to manipulate an element when another element is being hovered over, with the two elements structured like this:

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

Or they might be structured like this:

<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 attempted a solution that works for the first case but not the second:

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

The value of 'j' changes, so I can only hover over classnames with the same 'j'.

This approach works for case one but not both cases. I also tried:

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

However, this changes the background color without just hovering.

I am seeking a CSS or JavaScript-only solution that works for BOTH scenarios. Any suggestions?

javascript html css

Answer 1

Answer №1

To implement a mouseover effect in your webpage, you can use JavaScript mouseover or jQuery's .hover() method. The MDN provides useful information about the mouseover event.

myElement.addEventListener("mouseover", (event) => {
  // Perform an action on another element.
}

Answer 2

To implement a mouseover effect in your webpage, you can use JavaScript mouseover or jQuery's .hover() method. The MDN provides useful information about the mouseover event.

myElement.addEventListener("mouseover", (event) => {
  // Perform an action on another element.
}

Answer 3

Answer №2

Check out this suggestion:

     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>

Answer 4

Check out this suggestion:

     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>

Answer 5

Answer №3

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

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

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

                setTimeout(function () {
                    target.style.backgroundColor = "";
                    _style.innerHTML = '.class-close-' + j + ' { background-color: ""; }';
                  // Looking for a better effect when hovering instead of just removing style after 500ms
                }, 500);

                document.head.appendChild(_style);
            }

I came up with this solution, but I am still searching for a more visually appealing hover effect instead of simply removing the style after half a second. Hopefully, this code will benefit someone in need.

Answer 6

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

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

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

                setTimeout(function () {
                    target.style.backgroundColor = "";
                    _style.innerHTML = '.class-close-' + j + ' { background-color: ""; }';
                  // Looking for a better effect when hovering instead of just removing style after 500ms
                }, 500);

                document.head.appendChild(_style);
            }

I came up with this solution, but I am still searching for a more visually appealing hover effect instead of simply removing the style after half a second. Hopefully, this code will benefit someone in need.

Answer 7

Answer №4

In cases where we have control over the template code, handling one element nested inside another can typically be achieved using CSS.

However, if the elements have different parents, JavaScript would likely be the recommended approach, as others have already pointed out.

Answer 8

In cases where we have control over the template code, handling one element nested inside another can typically be achieved using CSS.

However, if the elements have different parents, JavaScript would likely be the recommended approach, as others have already pointed out.

Trigger the change of an element upon hovering over another element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Coding with a combination of JavaScript, AngularJS, and manipulating brackets

Assign the two values to variables in the CSS script

Troubleshooting: Issues with Jquery's has, find, contains functions

Encountered a CSS error while trying to compile the project with npm build

Exploring ways to incorporate various classes into my validate() elements using jQuery

What sets array of middlewares apart from compose-middleware?

What could be causing the background color not to change on the HTML page with Bootstrap?

Styling for the DataTable disappears upon loading jQuery

Discover the best way to enable lint support for MUI `sx` prop values

Error encountered when executing the npm run dev script

What is the process for displaying data submitted through a form on page B to page A using Node and Express?

Click on the following link to view your screen resolution:

Trouble arises as the Raspberry Pi GPIO pins refuse to toggle

What could be causing the CSS and HTML connection to fail?

What are the applications of client-side libraries within node.js?

How can you efficiently manage Access & Refresh tokens from various Providers?

What would be the best way to structure this workflow as a JavaScript data format?

Npm is unable to locate the package.json file in the incorrect directory

Automatically Switch Font Colors to Red and Green

Tips for organizing divs once another div has been hidden using jquery