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'); }); });
Comments
Post a Comment