首页 > 解决方案 > 链接变成蓝色的fr。当我在 CSS 中添加过渡时间时

问题描述

我有这个问题。当我给菜单链接(用于:悬停和:活动)一个过渡时间时,一旦我单击它们,它们就会变成蓝色一秒钟。我也有 2 个按钮链接,它们有过渡时间,但当我单击时它们不会变成蓝色。

我尝试用锚标签包裹li标签,反之亦然,但没有任何改变。任何人都知道为什么菜单链接会发生这种情况,但按钮不会发生这种情况?

.menu {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  line-height: 27px;
  margin-top: 2px;
  padding-top: 1px;
  background: rgb(255, 224, 189);
}

.menuitem {
  text-decoration: none;
  font-family: 'Varela Round', sans-serif;
  color: black;
  cursor: pointer;
  transition: .8s;
}

.menuitem:hover {
  color: white;
  text-shadow: 2px 2px 5px black;
}

.menuitem:active {
  color: white;
  text-shadow: 2px 2px 5px black;
  transform: scale(.5);
}
<nav>
  <ul class="menu">
    <li class="item home"><a class="current menuitem" href="index1.html">Home</a></li>
    <li class="item cani"><a href="cani.html" class="menuitem">Cani</a></li>
    <li class="item gatti"> <a href="gatti.html" class="menuitem">Gatti</a></li>
    <li class="item comeaiutarci"><a href="comeaiutarci.html" class="menuitem">Come aiutarci</a></li>
    <li class="item contatti"><a href="contatti.html" class="menuitem">Contatti</a></li>
  </ul>
</nav>

标签: cssbuttonhyperlinkhover

解决方案


推荐阅读