小编mar*_*ico的帖子

我试图以边框可见的方式标记给定的一般HTML元素集合(它们的CSS不在我的控制之下)的边框,并且它们在悬停时突出显示.

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

期望的行为是在任何两个元素之间只有一条线,但由于边距,边界在段落"Some content"和标题"World"之间重复.

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

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

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

有没有什么方法如何在不使用JS放置边框线的情况下保留悬停高光效果的同时将边框"合并"到单个边框之间？

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

更新:

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

• 每个元素显示其:在边界之前 …

我正在为内容管理系统管理 UI 构建扩展。该扩展由 CMS 在沙盒 iframe 中托管。

扩展的目的是嵌入 YouTube 视频，以便用户能够看到其预览。所以它是沙盒 iframe 中的一个 iframe。

我遇到的问题是沙箱（父 iframe）没有allow-presentation允许，这导致在 YouTube 嵌入代码中触发以下异常：

DOMException: Failed to construct 'PresentationRequest': The document is sandboxed and lacks the 'allow-presentation' 

视频工作正常，但未处理的错误正在生成不需要的调试断点，并向浏览器控制台发送垃圾邮件。

我试图用?fs=0参数禁用全屏模式，但仍然调用代码并且仍然抛出错误。

有没有办法使嵌入代码在没有启用允许呈现的 iframe 中工作而不会出错？