Question

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

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

来做

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

不幸的是没有发生任何事这是我的code

感谢您的帮助。

干杯埃里克

Answer 1

你必须给元素过渡时间我已经完成的操作是为.navigation a:hover的{{1}}选择器添加了另一个选择器，然后我延迟切换该类，以便在一段时间内可以看到它：

＆＃13;

.navigation a.active

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

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

1 个答案: