CSS3触发文档准备好的鼠标悬停状态

Question

我知道，有很多与此主题相关的帖子，但由于某些原因，我无法将答案应用于我的案例，并希望有人可以帮我解决这个问题。

基本上，我想让我的菜单在进入页面时以导航类的样式闪烁一次。 （你一样会和悬停的联系一次），我认为这将有可能在这个片段中

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

遗憾的是没有任何反应做... 这里我code

我感谢你的帮助。

干杯 埃里克

Answer 1

你必须给该元素的时间来过渡。
我所做的是增加了一个选择你的.navigation a:hover选择为.navigation a.active，然后我切换该类有延迟，以便它可以为一点点时间可见：

$(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/