Question

我正在为我的网络开发类创建一个网站，我有一个想法，用单个字母表示菜单项的导航，但当你将鼠标悬停在字母上时，它们会扩展为完整的单词。< / p>

实施例：如果菜单项显示为“[A]”，当您将鼠标悬停在该字母上时，它会扩展为“[关于]”。

这可以在HTML5 / CSS中完成，还是需要JavaScript，jQuery等？

Answer 1

我想你可以使用：after或：之前名为“content”的伪元素属性：

a:hover:after {      
  content: "after hovering";
 }

<a> A </a>

您也可以使用javascript执行此操作，所有这些都取决于它如何适合您当前的工作流程。

Answer 2

您可以使用CSS实现此效果。这段代码可能甚至可以进行很多优化，但它只是为了让您大致了解所需效果的效果。

<强> HTML

<nav>
  <a href="">About</a>
  <a href="">Test</a>
  <a href="">About</a>
  <a href="">Test</a>
</nav>

<强> CSS

body {
  margin: 0;
}

nav {
  height: 80px;
  align-items: center;
  background: #eee;
  display: flex;
  justify-content: space-around;
}

a {
  color: rgba(0, 0, 0, 0.8);
  font-size: 0;
  transition: 0.3s;
  text-decoration: none;
}

a:first-letter {
  font-size: initial;
}

a:hover {
  font-size: initial;
}

＆＃13;

body {
  margin: 0;
}
nav {
  height: 80px;
  align-items: center;
  background: #eee;
  display: flex;
  justify-content: space-around;
}
a {
  color: rgba(0, 0, 0, 0.8);
  font-size: 0;
  transition: 0.3s;
  text-decoration: none;
}
a:first-letter {
  font-size: initial;
}
a:hover {
  font-size: initial;
}

＆＃13;

<nav>
  <a href="">About</a>
  <a href="">Test</a>
  <a href="">About</a>
  <a href="">Test</a>
</nav>

＆＃13;

可折叠文本菜单

2 个答案: