当我悬停在元素旁边时，元素的悬停效果起作用

Question

我创建了一个带有悬停效果的简单元素，它可以改变它的颜色，但是，当我悬停在该元素旁边时，悬停效果起作用并改变了该元素的颜色。 问题是我希望悬停效果只在悬停元素本身时起作用。 这是网站 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>

Answer 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>

当我悬停在元素旁边时，元素的悬停效果起作用

When I hover beside the element the hover effect of the element works

html

css

hover