javascript - Trying to use Jquery hover to change font size -
im trying use jquery hover function change font size of tabs. think im having trouble targeting tabs.
this html im trying target:
<ul class="tabs" data-tab> <div class="tab"> <li class="tab-title"> <a href="#panel2-1">about me</a> </li> <li class="tab-title"> <a href="#panel2-2">portfolio</a> </li> </div> </ul>
i tried wrapping both tabs in div tag , assigned div tag called "tab"
this jquery code:
$(document).ready(function() { $('.tab').hover(function() { $(this).css('font-size','60px') }); });
can tell me im doing wrong? thanks!
div
element not allowed inside ul
that's first mistake, should be:
<ul class="tabs" data-tab> <!-- no party div elements here --> <li class="tab-title"><a href="#panel2-1">about me</a></li> <li class="tab-title"><a href="#panel2-2">portfolio</a></li> </ul>
.hover()
never return our text default state, cause .hover()
method listens mouseenter
, mouseleave
, on mouseleave you're again setting 60px
css on other hand it:
.tabs li:hover a{ /* or use>> .tabs a:hover */ font-size: 60px; }
if interested in jquery fun than:
$('.tabs li').hover(function( e ) { // or '.tab-title' $("a", this).css('font-size', e.type=="mouseenter"? 60 : "inherit"); // or 56 });
also using jquery don't need set px
cause px used default unless unit set.
Comments
Post a Comment