Search code examples
javascripthtmlmousehover

Change div color when mousehover in javascript

Here I have a textfield which I have given onmousehover function as shown below.

<h5 style="float:right;" id="showall" onmouseover="mouseOver()" onmouseout="mouseOut()">Show All</h5>

Here is a div for which I have to apply hover effect after I hover to Show All div

<div id="abc">
  <input type="text">
</div>

Here is my JavaScript

   function mouseOver() {
     document.getElementById("abc").style.color = "red";
   }

   function mouseOut() {
     document.getElementById("abc").style.color = "black";
   }

Above code is not working. Can anybody tell me where I'm wrong.

Solution

  • You can either give the id="abc" to input itself or do something like this:

    <div id="abc">
  <input style="color: inherit" type="text">
</div>

    Working Codepen