Question

我有一个HTML文件，我无法控制的内容。我所能做的就是注入一个CSS文件和/或JavaScript文件（如果需要，包括jQuery之类的库）。

在HTML中，将需要突出显示元素并添加了工具提示（例如，它们具有特定的data-attribute属性），但是它们并不方便地位于我可以对其应用样式的特定容器中。这些元素可以是<span>，<a>，<img>，<div>或几乎其他任何内容（内联或块）。

如果可以的话，我想用纯CSS解决这个问题，但是我愿意使用JavaScript来修改DOM，但是最终的HTML必须与原始HTML具有相同的布局，这只是亮点漂浮在特定元素上。

例如，我可能有一些这样的HTML：

<body>
    <p>This is a sample line of text with <a href="#">a link</a> in the middle that should be highlighted</p>

    <p>This is a sample line of text with <a href="#" data-highlight="true">a link</a> in the middle that should be highlighted</p>
</body>

最终应该看起来像这样：

Answer 1

我会喜欢这样的东西。如您所愿，仅CSS，HTML不变。

*[data-highlight="true"]-选择所有带有data-highlight="true"
background: rgba(255, 0, 0, 0.5)-为rgba背景提供50％的不透明度。

要记住的东西

如果某些元素具有特定的CSS规则，则需要调整代码下方的位置。例如，如果一个<span>需要具有以下规则，但已经具有position: absolute的位置值就不能更改为relative，并且特定规则必须在下面覆盖。

摘要

*[data-highlight="true"] {
  position: relative;
}

*[data-highlight="true"]:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 0, 0, 0.5);
  border: 1px solid red;
}

<body>
  <p>This is a sample line of text with <a href="#">a link</a> in the middle that should be highlighted</p>

  <p>This is a sample line of text with <a href="#" data-highlight="true">a link</a> in the middle that should be highlighted</p>
</body>

在任何HTML元素上覆盖一个半透明的框

1 个答案:

要记住的东西

摘要