CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
Joel
Joel

Reputation: 4593

Trying to use Jquery hover to change font size

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!

Upvotes: 1

Views: 1717

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

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.

Upvotes: 2

Related Questions