Question

我有一个问题：如何删除：当前点击的导航对象上的悬停效果？

＆＃13;

  .navigation-buttons li a {
  float: left;
  width: 150px;
  padding: 10px;
  color: #59114d;
  text-decoration: none;
  text-align: center;
  border-radius: 30px;
  transition: background 0.5s, font-weight 0.5s, color 0.5s ease-out;
}

.navigation-buttons li:not(:last-child) {
  margin-right: 10px;
}

.navigation-buttons li a:hover,
.navigation-buttons li a:active {
  font-weight: bold;
  background: #59114d;
  color: #edf2f4;

＆＃13;

<ul class="navigation-buttons rectangular2">
  <li class="gallery"><a href="gallery.html">galeria</a></li>
  <li class="about"><a href="about.html">o mnie </a></li>
  <li class="offer"><a href="#">oferta</a></li>
  <li class="contact"><a href="contact.html">kontakt</a></li>
</ul>

＆＃13;

是否有可能只使用CSS？感谢

Answer 1

只需删除您在此代码行上的`navigation-buttons元素中应用的hover样式，就可以在 CSS 中完成：

.navigation-buttons li a:hover,

你可以在这里测试一下：

＆＃13;

  .navigation-buttons li a {
  float: left;
  width: 150px;
  padding: 10px;
  color: #59114d;
  text-decoration: none;
  text-align: center;
  border-radius: 30px;
  transition: background 0.5s, font-weight 0.5s, color 0.5s ease-out;
}

.navigation-buttons li:not(:last-child) {
  margin-right: 10px;
}

.navigation-buttons li a:active {
  font-weight: bold;
  background: #59114d;
  color: #edf2f4;

＆＃13;

<ul class="navigation-buttons rectangular2">
  <li class="gallery"><a href="gallery.html">galeria</a></li>
  <li class="about"><a href="about.html">o mnie </a></li>
  <li class="offer"><a href="#">oferta</a></li>
  <li class="contact"><a href="contact.html">kontakt</a></li>
</ul>

＆＃13;

您可以详细了解hover样式here

删除单击元素的悬停效果

1 个答案: