根据主边框设置轮廓边框

Question

如何根据悬停时当前为矩形的原始边框设置轮廓边框？我想根据其边界进行设置。

#hello {
  width: 25px;
  height: 10px;
  background-color: red;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid red;
  border-bottom: 0;
  padding: 15px;
  transform: rotate(90deg);
  margin-top: 25%;
  float: right;
  cursor: pointer;
}

#hello:hover {
  outline: 2px solid #1abc9c;
}

#hello-left {
  width: 25px;
  height: 10px;
  background-color: red;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid red;
  border-bottom: 0;
  padding: 15px;
  transform: rotate(270deg);
  margin-top: 25%;
  float: left;
  cursor: pointer;
}

#hello-left:hover {
  outline: 2px solid #1abc9c;
  position: absolute;
}

<div id="hello-left"></div>
<div id="hello"></div>

Answer 1

尝试一下，一切都准备就绪...

#hello {
  width: 25px;
  height: 10px;
  background-color: red;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid red;
  border-bottom: 0;
  padding: 15px;
  transform: rotate(90deg);
  margin-top: 25%;
  float: right;
  cursor: pointer;
}
#hello:hover {
  filter: drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c);
}
#hello-left {
  width: 25px;
  height: 10px;
  background-color: red;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid red;
  border-bottom: 0;
  padding: 15px;
  transform: rotate(270deg);
  margin-top: 25%;
  float: left;
  cursor: pointer;
}
#hello-left:hover {
  filter: drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c);
}

<div id="hello-left"></div>
<div id="hello"></div>