CODEWITHSUNDEEP
javascripthtmlmousehover
Kirataka
Kirataka

Reputation: 482

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.

Upvotes: 0

Views: 8841

Answers (5)

theAussieGuy
theAussieGuy

Reputation: 157

A very quick method of doing this is to use 'toggle'. You can then create two classes in your css with the colours that you want. In your line of javascript, reference which colour you would like to toggle with the existing class in your div. 

/* here you use javascript to cycle between blue and gold. First you find the div by using document.getElementById('element')*/

function push() {
  document.getElementById("abc").classList.toggle('blue');
}
#abc {
  width: 200px;
  height:150px;
  padding: 20px;
  font-family: arial;
  color: black;
}

/*Your first colour to toggle*/
.gold {
  background: gold;
}
/*Your second colour to toggle*/
.blue {
  background: dodgerblue;
}
<!-- Notice that a class of 'gold' has been added to give the div a color. This will be toggled with your desired colour.  -->

<div id="abc" class="gold" onmouseover="push()">
Hover over here to toggle classes.
</div>

Upvotes: 0

ThisClark
ThisClark

Reputation: 14823

While this does not directly answer your question about JavaScript, I want to point out that a cascading stylesheet (CSS) is a better approach to solving this problem because JavaScript can always be turned off in the browser. In that case, your mouseover features will stop working whereas a stylesheet will persist.

#abc input {
  background-color: red;  
  color: black;
}

#abc input:hover {
  background-color: blue;  
  color: white;
}
<div id="abc">
  <input type="text" value="mouseover me">
</div>

If it achieves the same result, prioritize CSS over JavaScript.

Upvotes: 1

Sreekanth
Sreekanth

Reputation: 3130

Generally, Color property of the elements varies depending on the browser. So, setting the color property to the parent element, wouldn't have the same affect across all browsers, unless specified explicitly.

Here is what something you could do.

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

function mouseOut() {
  document.getElementById("abc").style.color = "black";
}
#abc * {
  color: currentcolor;
}
<h5 id="showall" onmouseover="mouseOver()" onmouseout="mouseOut()">Show All</h5>

<div id="abc">
  <input type="text" value="Sample Text">
</div>

Upvotes: 0

Rishabh
Rishabh

Reputation: 1213

You are applying color change on div. You need to apply it on the input box.

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


   function mouseOver() {
     document.getElementById("xyz").style.color = "red";
     console.log("In");
   }

   function mouseOut() {
     document.getElementById("xyz").style.color = "black";
     console.log("Out");
   }

Upvotes: 0

tanmay
tanmay

Reputation: 7911

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

Upvotes: 0

Related Questions