CSS3 文档就绪时触发鼠标悬停状态

Question

我知道，有很多与此主题相关的帖子，但由于某些原因，我无法将答案应用到我的案例中，希望有人能特别帮助我。

基本上，我希望我的菜单在进入页面时以导航 class 的样式闪烁一次。（就像你将鼠标悬停在链接上一样）我认为可以用这个片段来做到这一点

    $(function () {
        $(".navigation a").mouseover();
    });

不幸的是什么都没发生... 这是我的 code

感谢您的帮助。

干杯埃里克

Answer 1

您必须给元素过渡时间。
我所做的是为 .navigation a.active 的 .navigation a:hover 选择器添加了另一个选择器，然后我延迟切换 class 以便它可以在一段时间内可见：

$(function() {
  $(".navigation a").addClass('active');
  setTimeout(function() {
    $(".navigation a").removeClass('active');
  }, 150);
});

body {
  background-color: black;
}
/*Navigation formatting*/

.navigation {
  text-decoration: none;
  list-style: none;
  text-align: center;
  padding-top: 50px;
  border-top: 1px solid rgba(0, 0, 0, 0);
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  font-size: 38px;
  color: white;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.navigation ul {
  padding-left: 0;
}
.navigation li {
  display: inline;
  padding-left: 3em;
}
li:first-child {
  /*padding vom ersten element des menues entfernen*/
  padding-left: 0;
}
.navigation a {
  display: inline-block;
  padding: 10px;
}
.navigation a.active,
.navigation a:hover {
  color: #bd4832;
  text-shadow: 0px 0 15px #fff;
  border: 1px;
  text-decoration: none;
  border-top: 1px solid #fffad5;
  border-bottom: 1px solid #fffad5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="container-fluid">
  <nav class="navigation">
    <ul>
      <li><a class="navigation" href="#me">About</a>
      </li>
      <li><a class="navigation" href="#portfolio">Portfolio</a>
      </li>
      <li><a class="navigation" href="#contact">Contact</a>
      </li>
      <li><a class="navigation" href="#blog">Travelblog</a>
      </li>
    </ul>
  </nav>
</div>

http://jsfiddle.net/vkr1so7q/4/

CSS3 文档就绪时触发鼠标悬停状态

CSS3 Trigger mouseover state on document ready

html

css

jquery

triggers

mouseover