Trying to use Jquery hover to change font size

Question

Im trying to use the Jquery hover function to change the font size of some tabs. I think im having trouble targeting the tabs.

This is the HTML im trying to 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 just tried wrapping both tabs in a div tag and assigned the div tag a called "tab"

This is my Jquery code:

$(document).ready(function() {
    $('.tab').hover(function() {
        $(this).css('font-size','60px')
    });
});

Can someone tell me what im doing wrong? Thanks!

Answer 1

DIV element is not allowed inside UL so that's your first mistake, it should be:

<ul class="tabs" data-tab>
  <!-- no party for 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() will never return our text to the default state, cause actually the .hover() method listens for mouseenter and mouseleave , so on mouseleave you're again setting it to 60px

CSS on the other hand will do it:

.tabs li:hover a{ /* Or use>> .tabs a:hover */
   font-size: 60px;
}

If you really are just interested in jQuery just for fun than:

$('.tabs li').hover(function( e ) { // or simply '.tab-title'
   $("a", this).css('font-size', e.type=="mouseenter"? 60 : "inherit"); // or 56
});

also using jQuery you don't need to set px cause px are used by default unless another unit is set.