我创建了一个具有悬停效果的简单元素,该元素会更改其颜色,但是,当我将鼠标悬停在元素旁边时,悬停效果会起作用并更改元素的颜色。 问题是我希望悬停效果仅在悬停元素本身时起作用。 这是网站https://akramdaghar.github.io/numChanger/ 所有代码都在此GitHub存储库https://github.com/AkramDaghar/numChanger
中
#counter {
position: absolute;
width: 300px;
height: 235px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Josefin Sans", sans serif;
border: black solid 1px;
transition: 0.3s;
}
.btn_high, .btn_low {
font-size: 18px;
color: #000;
border: none;
padding: 10px 20px;
font-family: "Josefin Sans", sans serif;
background: none;
outline: none;
transition: 0.3s;
cursor: pointer;
}
.btn_high:hover {
color: #4CAF50;
}
.btn_high:active {
color: #8BC34A;
}
.btn_low:hover {
color: #f44336;
}
.btn_low:active {
color: #E91E63;
}
/*
(when you hover besides the number the hover effect works)
*/
#number {
font-size: 40px;
transition: 0.3s;
padding: 0px;
margin: 55px 0px 20px 0px;
box-sizing: 10px;
text-align: center;
}
#number:hover {
color: #607D8B;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400&display=swap" rel="stylesheet">
</head>
<body>
<div id="counter">
<div id="number">0</div>
<button class="btn_high">Higher</button>
<button class="btn_low">Lower</button>
</div>
</body>
</html>
答案 0 :(得分:1)
按如下所示更新代码,以使可悬停区域变小:
#counter {
position: absolute;
width: 300px;
height: 235px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Josefin Sans", sans serif;
border: black solid 1px;
transition: 0.3s;
}
.btn_high,
.btn_low {
font-size: 18px;
color: #000;
border: none;
margin: 10px 20px; /* changed */
font-family: "Josefin Sans", sans serif;
background: none;
outline: none;
transition: 0.3s;
cursor: pointer;
}
.btn_high:hover {
color: #4CAF50;
}
.btn_high:active {
color: #8BC34A;
}
.btn_low:hover {
color: #f44336;
}
.btn_low:active {
color: #E91E63;
}
/*
(when you hover besides the number the hover effect works)
*/
#number {
font-size: 40px;
transition: 0.3s;
margin: 55px auto 20px; /*changed*/
display:table; /*added */
}
#number:hover {
color: #607D8B;
}
<div id="counter">
<div id="number">0</div>
<button class="btn_high">Higher</button>
<button class="btn_low">Lower</button>
</div>