Question

我试图以一种边框可见的方式标记给定的一般HTML元素集合（它们的CSS不在我的控制之下）的边框，并在悬停时突出显示它们。

我目前正在使用伪元素：之前和之后实现这一点，但我正在努力与边缘。我需要使用CSS，而不是JS。

期望的行为是在任何两个元素之间只有一条线，但由于边距，边框在段落和＃34之间重复;某些内容＆＃34;和标题＆＃34;世界＆＃34;。

我可以将标记类应用于包装div或直接应用于类元素，如下面的代码片段所示，对我来说都可以。

＆＃13;

.mark-borders:before,
.mark-borders:after
{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  height: 1px;
  border-bottom: dashed 1px #ccc;
}

.mark-borders:hover:before,
.mark-borders:hover:after
{
  border-bottom: solid 1px red;
  z-index: 1;
}

＆＃13;

<div class="mark-borders">
  <h1>
    Hello
  </h1>
</div>
<div class="mark-borders">
  <p>
   Some content
  </p>
</div>
<div class="mark-borders">
  <h1>
    World
  </h1>
</div>
<br />
<hr />
<div class="mark-borders">
  <h1>
    Hello
  </h1>
</div>
<p class="mark-borders">
 Some content
</p>
<h1 class="mark-borders">
  World
</h1>

＆＃13;

有没有办法如何合并＆＃34;单个边框之间的边界，同时保留悬停突出显示效果，而不使用JS来放置边框线？

我尝试过使用：after for all，和：之前仅用于第一个元素，但在这种情况下，我要么丢失顶部边框的悬停效果，要么显示错误的位置（与原始相同的问题）边界）。

更新

我能够用以下概念整合几乎可行的解决方案：

每个元素都显示：border in border
最后一个元素也显示为：after border
悬停激活：在当前元素的边界之前和：在其下一个兄弟的边界之前

但是......即使它比原来的更好，边缘＆＃34;区域已经死了，没有响应：悬停，任何想法如何解决？

更新的代码：

＆＃13;

.mark-borders:before,
.mark-borders:last-child:after
{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  height: 1px;
  border-bottom: dashed 1px #ccc;
}

.mark-borders:hover:before,
.mark-borders:hover:last-child:after,
.mark-borders:hover + *:before
{
  border-bottom: solid 1px red;
  z-index: 1;
}

＆＃13;

<div>
  <div class="mark-borders">
    <h1>
      Hello
    </h1>
  </div>
  <div class="mark-borders">
    <p>
      Some content
    </p>
  </div>
  <div class="mark-borders">
    <h1>
      World
    </h1>
  </div>
</div>

＆＃13;

Answer 1

我编辑了您的代码，并提出了这个问题：https://jsfiddle.net/7g31c5rp/4/

.mark-borders:nth-of-type(2):after,
  p.mark-borders:after{
  display: none;
}
.mark-borders:hover + .mark-borders:before{
   border-bottom: solid 1px red;
   z-index: 1;
}

在悬停之前删除之后的某些内容并将其定位到WORLD。

Answer 2

仅使用同级选择器添加边框:before。然后为:after

提供:last-child边框

＆＃13;

.mark-borders:before,
.mark-borders + .mark-borders:before,
.mark-borders:last-child:after
{
  content: '';
  display: block;
  position: absolute;
  height: 0;
  width: 100%;
  margin-top: -1px;
  border-bottom: dashed 1px #ccc;
}

.mark-borders:hover:before,
.mark-borders:hover + .mark-borders:before,
.mark-borders:last-child:hover:after
{
  border-bottom: solid 1px red;
  z-index: 1;
}

＆＃13;

<div>
  <div class="mark-borders">
    <h1>
      Hello
    </h1>
  </div>
  <div class="mark-borders">
    <p>
      Some content
    </p>
  </div>
  <div class="mark-borders">
    <h1>
      World
    </h1>
  </div>
</div>

＆＃13;

忽略伪元素的边距：在

2 个答案: