当我将鼠标悬停在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>
如果有人可以帮助我解决这个问题,我将很高兴!
答案 0 :(得分: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>
答案 1 :(得分:0)
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>
答案 2 :(得分:0)
$('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>
答案 3 :(得分:0)
我使用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