jquery - CSS3 Trigger mouseover state on document ready -
i know, there plenty of posts relating topic, reasons wasn't able apply answers case , hope can me in particular.
basically, want menu blink once in style of navigation class when entering page. (like hover links once) thought possible snippet
$(function () { $(".navigation a").mouseover(); }); unfortunately nothing happens... here code
i appreciate help.
cheers eric
you have give element time transition.
i've done added selector .navigation a:hover selector .navigation a.active, toggle class delay can visible little bit of time:
$(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: 0.7s ease; transition: 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 { 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>
Comments
Post a Comment