鼠标悬停时更改字体颜色

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

鼠标悬停时更改字体颜色

Change font color on mouseover

html

javascript

css

dynamic-html