Making text appear on hover changes div height

Question

I am building a site and one of the components requires different text to be displayed in the same spot when you hover over different blocks. I am using jQuery to accomplish this and changing the html, however I am noticing since the text is different sizes it pushes down the div to allocate more room for the text.

Is it possible to keep the text transparent or something so the colour and html is changed at the same time, to give the illusion it is popping in?

Please see code below:

$(".stats-text-1").hover(
  function() {
    $(".stats-text").html(
      "Our client’s monetary milestones are driven by our social tactics and digital marketing."
    );
  },
  function() {
    $(".stats-text").html(" ");
  }
);

$(".stats-text-2").hover(
  function() {
    $(".stats-text").html(
      "Our experience is from more than just a couple of wins - it’s from learning through years of wins and losses."
    );
  },
  function() {
    $(".stats-text").html(" ");
  }
);

$(".stats-text-3").hover(
  function() {
    $(".stats-text").html(
      "Our clients currently see a minimum average of 5.4 times return on ad spend."
    );
  },
  function() {
    $(".stats-text").html(" ");
  }
);

.stats-1 {
  font-size: 12vw;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.83);
}

.stats-2 {
  font-size: 2vw;
  font-weight: bold;
  color: #f2f2f2;
}

.stats-3 {
  font-size: 2vw;
  color: rgba(255, 255, 255, 0.6);
}

.stats-text {
  padding-top: 1rem;
  font-size: 2vw;
  text-align: left;
  color: #fff6f4;
}



   
  BEEN THERE, DONE THAT.
  BEEN THERE, DONE THAT.




   
  
    11
    Million
    
      Revenue Generated
    
  
   
  
    9
    Years
    
      In The Making
    
  
   
  
    6
    Times
    
      Return On Ad Spend

David Thomas · Accepted Answer

The way I've adressed the problem is based on using CSS Grid to create the initial size of the element in which you're showing your messages, and also adding the messages to the HTML, rather than replacing text.

While you could – of course – establish the sizes of the elements by positioning the content off-screen to inform the necessary sizing, and then animate to those dimensions before showing the message on-screen, that's more work than feels necessary.

My suggested approach is below, with explanatory comments in the code itself:

// using the '.stats' selector to obtain a jQuery Object containing
// all of the elements with that class-name in the document,
// we then use the attr() method to set the custom data-index attribute
// for later use:
$('.stats').attr('data-index', function(i) {
  return i + 1;
  // rather than the hover() method we use the on() method instead to handle
  // both 'mouseenter' and 'mouseleave' events, and we pass the Event Object,
  // as 'evt', into the anonymous function:
}).on('mouseenter mouseleave', function(evt) {

  // here we use jQuery's data() method to retrieve the value of the
  // data-index custom-attribute:
  let index = $(this).data('index');

  // here we retrieve the .message element which has the same
  // data-index attribute and attribute-value, which is also within
  // a .marketing element:
  $(`.marketing .message[data-index="${index}"]`)
    // we then use the toggleClass() method to add, or remove,
    // the 'visible' class to the relevant .message element
    // depending on whether the assessment returns true or false;
    // if the evt.type is exactly-equal to 'mouseenter' the
    // assessment returns Boolean true, and the class is added;
    // otherwise Boolean false is returned and the class is
    // removed:
    .toggleClass('visible', evt.type === 'mouseenter');
});

$('input').on('input', function(){
  $('main').css('--textSize',`${$(this).val()}rem`)
}).change();

/* a basic CSS reset to ensure that all elements
   are sized in similar ways: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* defining CSS Grid as the layout of
   the  element: */
main {
  display: grid;
  /* defining three equal-width columns, each
     of one fractional-unit of the available
     space: */
  grid-template-columns: repeat(3, 1fr);
  margin: 0.5em auto;
  width: 90vw;
}

/* I removed the inline

Making text appear on hover changes div height

Answers (1)

Related Questions