CSS3 Trigger mouseover state on document ready

Question

Я знаю, что есть много сообщений, относящихся к этой теме, но по некоторым причинам я не смог применить ответы на свое дело и надеюсь, что кто-то может мне помочь в этом.

В принципе, я хочу, чтобы мое меню мигало один раз в стиле навигационного класса при входе на страницу. (Как вы бы парить ссылки один раз) я думал, что это будет возможно сделать с этим фрагментом

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

К сожалению, ничего не происходит ... Вот мой code

Я ценю вашу помощь.

Приветствия Eric

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/