如何划分边框或如何圈出圆圈

Question

悬停时的预期结果：

[Expected Result Image]

＆＃13;

＆＃13;

Record again?

＆＃13;

What is the best way?
What is the simple way?

＆＃13;

＆＃13;

＆＃13;

jsFiddle

我一直在寻找更简洁的方法来圈出一个圆圈但是很好。你可以看到我做得不好。也许有人知道。我们非常欢迎任何帮助。

Answer 1

您可以将SVG <circle>元素与adjacent sibling selector一起用于悬停状态。

body {
  height: 100vh;
  margin: 0;
  display: flex;
}
svg {
  flex: 1;
}
.circle--inner {
  color: #E7E7DC;
}
.circle--outer {
  color: #868780;
  opacity: 0;
}
.circle--inner:hover + .circle--outer {
  opacity: 1;
}

<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle class="circle circle--inner" cx="50%" cy="50%" r="40" stroke-width="8" fill="currentColor" stroke="currentColor" />
  <circle class="circle circle--outer" cx="50%" cy="50%" r="52" stroke="currentColor" stroke-width="6" fill="none" />
</svg>

或者如果您更喜欢使用伪元素：

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width:96px;
  height: 96px;
  border-radius: 50%;
  margin: calc(104px - 96px); /* Pseudo-element overflow */
  background-color: #E7E7DC;
  position: relative;
}
.circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #868780;
  border-radius: inherit;
  width: 104px;
  height: 104px;
  opacity: 0;
}
.circle:hover::after {
  opacity: 1;
}

<div class="circle"></div>

第一种方法更具语义性，实际上会触发悬停在圆圈上的“边界”，而不是边界框。

Answer 2

这是一种方法。可能有更好的方法。

revised jsfiddle

#circle {
  width: 200px;
  height: 200px;
  background: #e2e2dc;
  position: relative;
  border-radius: 999px;
  margin: 20px;
}
#circle:hover {
  box-shadow: 0 0 0 2pt white;
}
#circle:hover:after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: #555;
  z-index: -1;
  border-radius: 999px;
}

<div id="circle"></div>