Question

当鼠标悬停在上方时，如何显示未显示元素的内容？

给出

// under 'methods'
deleteProject(project) {
  this.$confirm('Are you sure you want to delete this project? '
    + 'This cannot be undone.', 'Warning', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        const request_url = this.url + project.id + '/';
        this.$message({
          type: 'success',
          message: 'Project deleted.'
        });
        return axios({
          method: 'delete',
          url: request_url,
          id: project.id
        }).then(response => {
          console.log(response);
        }).catch(function (error) {
          console.log(error);
        });
      }).catch(() => {
        return false;
      })
}

我想用*（或可能是彩色块）代替笔记。当鼠标悬停在上方时，便笺内容将弹出在基础文本上方（而不是内联）。

类似：

Some text.<span class="note">Note contents.</span> Text continues.

但是当然不行，因为.note {position: absolute; display: none} .note::before {display:inline; contents: "*"} .note:hover {display: inline}还会隐藏:: before子项。

我可以这样做：

.note {display:none}

但这会扩展注释的内联，而我需要它来覆盖注释之后继续的文本。

如果可以更改HTML，可以在注释前添加.note {font-size: 0} .note::before {content: "*"; font-size: initial} .note:hover {font-size: initial}，并在其上触发弹出窗口。但是我无法更改源HTML。

CSS3和SASS可以，但是我不能使用Javascript。

Answer 1

使用visibility

.note {
  display:inline-block;
  white-space:nowrap;
  width:5px;
  visibility: hidden;
  background:#fff;
}

.note::before {
  visibility: visible;
  content: "*";
}

.note:hover {
  visibility:visible;
  width:auto;
  white-space:normal;
  position:absolute;
}

Some text.<span class="note">Note contents.</span> Text continues. Something like:

在弹出窗口中显示大部分未显示的元素

1 个答案: