鼠標懸停時更改字體顏色

Question

當我將鼠標懸停在elem1 ，我試圖更改顏色，但是我的代碼不起作用。

 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> 

如果有人可以幫助我解決這個問題，我將非常高興！

Answer 1

您可以在CSS中簡單地做到這一點： .calCell:hover

了解有關: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> 

附加值：

.calCell[value="14"]:hover並添加到按鈕<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懸停過渡

 .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

我使用JQuery解決此問題。 @Abhishek Mishra感謝您的想法！

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