时间戳

首页 > 解决方案 > 当我悬停在元素旁边时，元素的悬停效果起作用

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

问题描述

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

标签： htmlcsshover

解决方案

如下更新您的代码以使可悬停区域变小：

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

推荐阅读