html - 是否可以将鼠标悬停在导航栏中的导航按钮上，显示它的描述？

Question

当我将鼠标悬停在导航栏中的导航图标上时，我希望它简单地展开并显示图标所指的内容。

例如，如果我将鼠标悬停在 Facebook 图标上，它应该会在不同的导航按钮中显示“Facebook Page”的描述，一旦我将鼠标移开，它就会消失。

我对此很陌生，我会很感激任何帮助。

当前的 CSS：

.showfacebook {
  display: none;
}

.showbook {
  display: none;
}

.showpen {
  display: none;
}

.showusergraduate {
  display: none;
}

.showusergroup {
  display: none;
}

.showfacebook a:hover {
  display: block;
}

.showbook a:hover {
  display: block;
}

.showpen a:hover {
  display: block;
}

.showusergraduate a:hover {
  display: block;
}

.showusergroup a:hover {
  display: block;
}

标签： htmlcss

Answer 1

您在寻找CSS 工具提示吗？如果要将图像本身更改为文本之类的其他内容，则需要 JavaScript