Question

我正在尝试使用html和CSS实现工作流程子弹点，我已经使用悬停将边框添加到div但是它会影响附近的元素，任何提示以避免这种情况会受到赞赏吗？

.bullets {
  display: inline-block;
  height: 7px;
  width: 7px;
  background-color: grey;
  border-radius: 50%;
}

.bullets:hover {
  border: 5px solid lightgrey;
}

p {
  display: inline;
  margin-left: 5px;
}

.bulletChild {
  margin-left: 20px;
}

<body>
  <div class="block">
    <div class="bullets"></div>
    <p>this is workflowy clone</p>
    <div class="bulletChild">
      <div class="bullets"></div>
      <p>this is workflowy clone</p>
    </div>
  </div>
</body>

我的小提琴：https://jsfiddle.net/renx777/mwvx8zdz/3/

Answer 1

你真的应该使用UL或OL标签作为列表。

但考虑到您当前的HTML，而不是使用边框，您可以使用box-shadow：

.bullets {
  display:inline-block;
  height: 7px;
  width: 7px;
  background-color:grey;
  border-radius:50%; 
}

.bullets:hover {
  box-shadow: 0 0 0 5px black;
}

p {
  display:inline;
  margin-left:5px;
}


.bulletChild {
  margin-left:20px;
}

<body>

  
  <div class="block">
    <div class="bullets"></div>
    <p>this is workflowy clone</p>
    <div class="bulletChild">
      <div class="bullets"></div>
      <p>this is workflowy clone</p>
    </div>
    
  </div>

悬停在元素上时如何不影响相邻元素？

1 个答案: