问在元素上方盘旋时，如何不影响相邻元素？
EN

Stack Overflow用户

提问于 2017-07-17 15:50:37

回答 1查看 99关注 0票数 0

我试图使用html和CSS实现workflowy项目点，我已经使用悬浮将边框添加到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/

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-17 15:56:39

您确实应该使用UL或OL标记作为列表。

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45148553

复制

相似问题

问在元素上方盘旋时，如何不影响相邻元素？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在元素上方盘旋时，如何不影响相邻元素？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在元素上方盘旋时，如何不影响相邻元素？
EN