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>

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


Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -