Hover over an element to change its text using jQuery JS

Question

Hover over an element to change its text using jQuery JS

Whenever I hover over the entire DIV kontakt-block, I want the text in the span TEXT-DISPLAY to be altered. It's easy for me to do this when there is only one kontakt-block. However, I face a challenge when it comes to dealing with classes. In each span, I require a different text to be displayed upon hover.

<div class="kontakt-block color1" onmouseover="changeText('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c79717d75705c7b717d7570327f73">[email protected]</a>')" onmouseout="defaultText('Email')">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Email</span>
     </div>
</div>
<div class="kontakt-block color2">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Phone</span>
     </div>
</div>
<div class="kontakt-block color3">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Facebook</span>
     </div>
</div>

<script>
                    function changeText(text) {
                        var display = document.getElementsById('text-display');
                        display.innerHTML = "";
                        display.innerHTML = text;
                    }
                    function defaultText(textd) {
                        var display = document.getElementsById('text-display');
                        display.innerHTML = "";
                        display.innerHTML = textd;
                    }
</script>

This implementation works well for altering text within a single span, however, challenges arise when multiple spans are involved.

javascript jquery html css

Answer 1

Answer №1

Here's an alternative method using just pure CSS and HTML, providing you with one option:

.text-display2 {
  display:none;
}

.kontakt-block:hover .text-display {
  display:none;
}

.kontakt-block:hover .text-display2 {
  display:block;
}

<div class="kontakt-block color1">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Email</span>
          <span class="text-display2">Email2</span>
     </div>
</div>
<div class="kontakt-block color2">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Phone</span>
       <span class="text-display2">Phone2</span>
     </div>
</div>
<div class="kontakt-block color3">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Facebook</span>
       <span class="text-display2">Facebook2</span>
     </div>
</div>

Answer 2

Here's an alternative method using just pure CSS and HTML, providing you with one option:

.text-display2 {
  display:none;
}

.kontakt-block:hover .text-display {
  display:none;
}

.kontakt-block:hover .text-display2 {
  display:block;
}

<div class="kontakt-block color1">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Email</span>
          <span class="text-display2">Email2</span>
     </div>
</div>
<div class="kontakt-block color2">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Phone</span>
       <span class="text-display2">Phone2</span>
     </div>
</div>
<div class="kontakt-block color3">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Facebook</span>
       <span class="text-display2">Facebook2</span>
     </div>
</div>

Answer 3

Answer №2

This method utilizes the information stored in data fields to determine which values should be assigned.

document.querySelectorAll('.kontakt-block').forEach(function(block){
  block.addEventListener('mouseenter', changeText);
  block.addEventListener('mouseleave', defaultText);
});

function changeText (e) {
  var $span = $(e.target).find('.text-display')
    .fadeOut('slow', function(){
      $span.text(e.target.dataset.hoverValue).fadeIn();
    });
}

function defaultText (e) {
  var $span = $(e.target).find('.text-display')
    .fadeOut('slow', function(){
      $span.text(e.target.dataset.defaultValue).fadeIn();
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kontakt-block color1" data-default-value="Email" data-hover-value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482d25292124082f25292124662b2725">[email protected]</a>">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="kontakt-block color2" data-default-value="Phone" data-hover-value="123-456-7890">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="kontakt-block color3" data-default-value="Facebook" data-hover-value="fbHandle">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Facebook</span>
  </div>
</div>

Answer 4

This method utilizes the information stored in data fields to determine which values should be assigned.

document.querySelectorAll('.kontakt-block').forEach(function(block){
  block.addEventListener('mouseenter', changeText);
  block.addEventListener('mouseleave', defaultText);
});

function changeText (e) {
  var $span = $(e.target).find('.text-display')
    .fadeOut('slow', function(){
      $span.text(e.target.dataset.hoverValue).fadeIn();
    });
}

function defaultText (e) {
  var $span = $(e.target).find('.text-display')
    .fadeOut('slow', function(){
      $span.text(e.target.dataset.defaultValue).fadeIn();
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kontakt-block color1" data-default-value="Email" data-hover-value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482d25292124082f25292124662b2725">[email protected]</a>">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="kontakt-block color2" data-default-value="Phone" data-hover-value="123-456-7890">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="kontakt-block color3" data-default-value="Facebook" data-hover-value="fbHandle">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Facebook</span>
  </div>
</div>

Answer 5

Answer №3

It appears that this code snippet aligns with your intended objective.

function modifyTextContent(element, newText) {
  var targetElement = element.children;
  var nestedElement = targetElement[0].children;
  nestedElement[0].innerHTML = newText;
}

<div class="block1" onmouseover="modifyTextContent(this, 'New content 1')" onmouseout="modifyTextContent(this, 'Email')">
  <div class="content-block">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="block2" onmouseover="modifyTextContent(this, 'New content 2')" onmouseout="modifyTextContent(this, 'Phone')">
  <div class="content-block">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="block3" onmouseover="modifyTextContent(this, 'New content 3')" onmouseout="modifyTextContent(this, 'Facebook')">
  <div class="content-block">
    <span class="text-display">Facebook</span>
  </div>
</div>

Answer 6

It appears that this code snippet aligns with your intended objective.

function modifyTextContent(element, newText) {
  var targetElement = element.children;
  var nestedElement = targetElement[0].children;
  nestedElement[0].innerHTML = newText;
}

<div class="block1" onmouseover="modifyTextContent(this, 'New content 1')" onmouseout="modifyTextContent(this, 'Email')">
  <div class="content-block">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="block2" onmouseover="modifyTextContent(this, 'New content 2')" onmouseout="modifyTextContent(this, 'Phone')">
  <div class="content-block">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="block3" onmouseover="modifyTextContent(this, 'New content 3')" onmouseout="modifyTextContent(this, 'Facebook')">
  <div class="content-block">
    <span class="text-display">Facebook</span>
  </div>
</div>

Answer 7

Answer №4

Utilizing only JavaScript and CSS for smooth transition effects:

function updateText() {
  var span = this.querySelector('.text-display');
  setTextContent(span, this.dataset.sample);
}

function resetText() {
  var span = this.querySelector('.text-display');
  setTextContent(span, this.dataset.default);
}

function setTextContent(span, text) {
  span.classList.add('hide');
  setTimeout(function() {
     span.innerHTML = text;
     span.classList.remove('hide');
  }, 310, span, text);
}

var blocks = document.getElementsByClassName('contact-block');
for (var block of [...blocks]) {
  block.addEventListener("mouseover", updateText, false);
  block.addEventListener("mouseout", resetText, false);
}

.text-display.hide {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.text-display {
  opacity: 1;
}

<div class="contact-block color1" data-default="Email" data-sample="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f5fdf1f9fcd0f7fdf1f9fcbef3fffd">[email protected]</a>">
  <div class="contact-block-content">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="contact-block color2" data-default="Phone" data-sample="123-456-7890">
  <div class="contact-block-content">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="contact-block color3" data-default="Facebook" data-sample="Login with FB">
  <div class="contact-block-content">
    <span class="text-display">Facebook</span>
  </div>
</div>

Answer 8

Utilizing only JavaScript and CSS for smooth transition effects:

function updateText() {
  var span = this.querySelector('.text-display');
  setTextContent(span, this.dataset.sample);
}

function resetText() {
  var span = this.querySelector('.text-display');
  setTextContent(span, this.dataset.default);
}

function setTextContent(span, text) {
  span.classList.add('hide');
  setTimeout(function() {
     span.innerHTML = text;
     span.classList.remove('hide');
  }, 310, span, text);
}

var blocks = document.getElementsByClassName('contact-block');
for (var block of [...blocks]) {
  block.addEventListener("mouseover", updateText, false);
  block.addEventListener("mouseout", resetText, false);
}

.text-display.hide {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.text-display {
  opacity: 1;
}

<div class="contact-block color1" data-default="Email" data-sample="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f5fdf1f9fcd0f7fdf1f9fcbef3fffd">[email protected]</a>">
  <div class="contact-block-content">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="contact-block color2" data-default="Phone" data-sample="123-456-7890">
  <div class="contact-block-content">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="contact-block color3" data-default="Facebook" data-sample="Login with FB">
  <div class="contact-block-content">
    <span class="text-display">Facebook</span>
  </div>
</div>

Hover over an element to change its text using jQuery JS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue with Angular 18 component not being displayed or identified

Bootstrap table issue: server side call fails to trigger

Typescript double-sided dictionary: a comprehensive guide

JavaScript - Issue arises when evaluating the sine of complex numbers of large magnitudes

"What is the best way to display an image from a table and then enlarge it to full size when a button is clicked, all

Having trouble with Javascript files failing to load while hosting a website on digital ocean?

Image compression using JavaScript or JSP

AngularJS: dynamic autocomplete field with scroll functionality

Alignment of label not remaining centered vertically, issue with bootstrap

Options for caching in Angular

Issue encountered when retrieving data from a cross-domain AJAX request

Excessive amount of decimal places in a number can lead to its conversion into scientific notation

When the button is clicked, remove the border-bottom

The system seems to be having trouble locating the password property, as it is returning a value of

Restrict printing loops within the designated division layer

How can I insert PHP code within the style attribute of a div tag?

The functionality of Jquery Ajax is functioning seamlessly on my local machine, but encountering issues

perplexed by the pair of buttons

Execution priority of Javascript and PHP in various browsers

Working with NodeJS: Utilizing object casting with default values and eliminating superfluous