html - 我如何在我的选项卡中使用非选择器以在悬停时显示工具提示消息

Question

我正在制作一个页面，其中有 3 个标签“搜索者”、“所有者”和“管理员”。

1. 如果寻求者登录，则“所有者”和“管理员”选项卡应在悬停在“所有者”和“管理员”选项卡上时显示工具提示消息“您无权使用此部分/选项卡”
2. 如果所有者登录，则“管理”选项卡应在悬停在“管理”选项卡上时显示工具提示消息“您无权使用此部分/选项卡”。

我们是否可以使用 CSS :not() 选择器来实现这一点？我试过了但没有运气。或者有其他方法可以实现吗？

这是我的作品:

https://codepen.io/shahzad80/pen/KYJexJ

<div class="row">
    <a href="#" class="btn tooltip right">
      <span>Seeker</span>
      <span class="tooltip-content">Lorem ipsum dolor sit amet</span>
    </a>
  </div>

<div class="row">
    <a href="#" class="btn tooltip right">
      <span>Owner</span>
      <span class="tooltip-content">You are not authorised for this Section</span>
    </a>
  </div>

<div class="row">
    <a href="#" class="btn tooltip right">
      <span>Admin</span>
      <span class="tooltip-content">You are not authorised for this Sectiont</span>
    </a>
  </div>

Answer 1

CSS 无法知道谁登录或未登录，所以你必须使用 Javascript 根据谁登录来添加 CSS 类。(或者你可以为不同的用户加载不同的 CSS 文件，但这看起来很笨重)

HTML

<div class="row">
    <a href="#" class="btn tooltip right">
      <span>Seeker</span>
      <span class="tooltip-content">Lorem ipsum dolor sit amet</span>
    </a>
</div>

CSS

.row.allowed a > .tooltip-content {
  display:none !important;
}

JS，搜索者已登录，所以我们允许第一个按钮

let rows = document.getElementsByClassName("row")

// allow the first row
let seeker = rows[0]
seeker.classList.add("allowed")

您可以使用 rows[1] 和 rows[2]

允许其他行

您可以反过来，只将 tooltip 类添加到不允许的行，而不是在允许按钮时隐藏工具提示。

Codepen