css3 transitions for before content on hover -


hi , sorry english, title doesn't seem quite obvious. here i'm trying do. have navigation following:

<nav>         <ul>             <li><a href=""><?php echo __("accueil"); ?></a></li>             <li><a href=""><?php echo __("biographie"); ?></a></li>             <li><a href=""><?php echo __("agenda"); ?></a></li>             <li><a href=""><?php echo __("archives"); ?></a></li>             <li><a href=""><?php echo __("programmes"); ?></a></li>         </ul> </nav> 

i want hover append arrow on left of each navigation link. css far:

nav li a{     color: #747474;     font-size: 16px;     text-transform: capitalize; } nav li:hover:before{     content: '> ';     color: #fff; } 

this code working, tried add transition arrow apparition make smoother instead of appearing in brutal manner. unfortunately failed , cannot figure if possible. there have other ways since i'm facing problem extend knowledge , understand how make work.

thank in advance help!

try this:
html:

<nav>     <ul>         <li><span>></span><a href="">aaa</a></li>         <li><span>></span><a href="">bbb</a></li>         <li><span>></span><a href="">ccc</a></li>         <li><span>></span><a href="">ddd</a></li>         <li><span>></span><a href="">eee</a></li>     </ul> </nav>   

css:

nav li a{     color: #747474;     font-size: 16px;     text-transform: capitalize; }   

js:

$(document).ready(function(){     $('li').find('span').hide();     $('li').mouseenter(function(){         $(this).find('span').fadein('slow');     }).mouseout(function(){         $(this).find('span').fadeout('slow');     }); });   

jsfiddle demo


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -