Question

I’m missing a final 1% of a footer element I’m working on.

The logic of what I want to do should be obvious: I want to have the word EXPAND showing when I hover over the footer, and I want the word HIDE showing when the footer is expanded.

I have everything working except the HIDE part when the footer is expanded—when I hover away from the footer block, it shows the word EXPAND again. I want to stop that hover event from occurring. Or at least I think that’s what I want to do.

=>JSFiddle will show you what I’m talking about.

Appreciate the help,

Terry

$(document).ready(function() {
  $("#shows").click(function () {
      $('footer').toggleClass("highlight");
      $('#shows').text('Hide');
    });
    $("footer").hover(
      function () {
        $('#shows').text('+Expand');
      }, 
      function () {
        $('#shows').text('Shows');
      }
    );    
});

Answer 1

I think what you want to do is change the hover text of #shows based on whether or not footer has the class “highlight”. I changed your hover handler to:

$("footer").hover(
    function () {
        $('#shows').text($('footer').hasClass("highlight") ? "Hide" : "+Expand");
    },
    function () {
        $('#shows').text('Shows');
    }
);

Modified Fiddle