鼠标悬停时更改字体颜色

Question

I'm trying to change the color, when I mouseover elem1 , but my code doesn't work..

 let user1 = new user('Stan'); window.onload = function() { let elem1 = document.getElementById('u1'); let getNum = document.getElementById("u1").value = "14"; elem1.addEventListener("mouseover", highlight); function highlight() { document.getElementsById("u1").value = "14".style.color = "#00ff00"; //alert(getNum); getNum check } function user(name) { this.name = name; } }; 

 .calCell { background-color: rgba(255, 228, 196, 0.1); font-family: JMH Arkham; font-size: 50px; color: khaki; text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black; width: 70px; height: 70px; border-color: rgba(176, 196, 222, 0.2); } 

 <p id="u1"> <script> (document.write(user1.name[0]); </script> </p> <tbody> <tr> <td><button class="calCell">01</button></td> <td><button class="calCell">14</button></td> </tr> </tbody> 

I will be happy if someone can help me to resolve this!

Answer 1

You can simply do it in css: .calCell:hover

Learn about :hover : https://www.w3schools.com/cssref/sel_hover.asp

 .calCell { background-color: rgba(255,228,196,0.1); font-family: JMH Arkham; font-size: 50px; color: khaki; text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black; width: 70px; height: 70px; border-color: rgba(176,196,222,0.2); } .calCell:hover{ color:red; } 

 <tbody> <tr> <td><button class="calCell">01</button></td> <td><button class="calCell">14</button></td> </tr> </tbody> 

Accordding Value:

.calCell[value="14"]:hover and add to button <button class="calCell" value="01">01</button>

  .calCell { background-color: rgba(255,228,196,0.1); font-family: JMH Arkham; font-size: 50px; color: khaki; text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black; width: 70px; height: 70px; border-color: rgba(176,196,222,0.2); } .calCell[value="14"]:hover{ color:red; } 

 <tbody> <tr> <td><button class="calCell" value="01">01</button></td> <td><button class="calCell" value="14">14</button></td> </tr> </tbody> 

Answer 2

CSS hover with transition

 .calCell { background-color: rgba(255, 228, 196, 0.1); font-family: JMH Arkham; font-size: 50px; color: khaki; text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black; width: 70px; height: 70px; border-color: rgba(176, 196, 222, 0.2); transition: 0.3s; } .calCell:hover { color: blue; } 

 <p id="u1"> </p> <tbody> <tr> <td><button class="calCell">01</button></td> <td><button class="calCell">14</button></td> </tr> </tbody> 

Answer 3

 $('button.calCell').hover(function() { $(this).css('color','red') }); $('button.calCell').mouseleave(function() { $(this).css('color','khaki') }); 

 .calCell { background-color: rgba(255,228,196,0.1); font-family: JMH Arkham; font-size: 50px; color: khaki; text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black; width: 70px; height: 70px; border-color: rgba(176,196,222,0.2); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="u1"></script></p> <tbody> <tr> <td><button class="calCell">01</button></td> <td><button class="calCell">14</button></td> </tr> </tbody> 

Answer 4

I use JQuery for resolve this. @Abhishek Mishra Thanks for idea!

 //JQuery starts from here $('#u1').mouseover(function(){ $('.calCell:contains(11)').css('color', 'goldenrod'); }); $('#u1').mouseout(function(){ $('.calCell').css('color', 'khaki'); }); //JQuery over here