Replace text of element on hover jQuery JS

Question

When I hover over whole DIV kontakt-block I need to have text in span TEXT-DISPLAY changed. I will do it by myself when there's only one kontakt-block. But when it goes to classes i can not. In each span i need to have different text to appear on hover.

<div class="kontakt-block color1" onmouseover="changeText('[email protected]')" 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>

Here's what i did. It works but while there's only one span to change.

Hello and welcome to SO! have you tried any code yet, please show us what you have tried so far even if you have failed, show us some effort ;) — Scaramouche
– Scaramouche, Commented Apr 10, 2018 at 19:19
The first thing to become familiar with are contextual lookups, and then how to change the text of an element. After that it's just a question of determining what text you should swap in/out. — Taplar
– Taplar, Commented Apr 10, 2018 at 19:20
You can show us how you did with only one kontakt-block first — Yi Zhou
– Yi Zhou, Commented Apr 10, 2018 at 19:23
Do you want to continue using the inline bindings or do you care? Because if so, this becomes a javascript problem, rather than a jQuery related problem. — Taplar
– Taplar, Commented Apr 10, 2018 at 19:27
I don't have to use js. I don't mind if you change it all. I started learing JS this year in school. And jquery, i don't know at all. And this code in topic doesn't work. — Lazy Artist SQuex
– Lazy Artist SQuex, Commented Apr 10, 2018 at 19:31

Yi Zhou · Accepted Answer · 2018-04-10 19:33:32Z

3

Another way to do this is use pure css and html, just one option for you

.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>

answered Apr 10, 2018 at 19:33

Yi Zhou

8231 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lazy Artist SQuex Over a year ago

I tried working with css, but i failed a couple of times. it was changing but my site and divs fall off. Btw thanks!

Myles Over a year ago

This is a good method too, and has more potential for a fade in transition, I think

Lazy Artist SQuex Over a year ago

Yes. Now i have problem with transition-duration with JavaScript. But its changing yay!

Taplar · Accepted Answer · 2018-04-10 19:57:24Z

1

This logic uses the data fields to know what values to set.

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="[email protected]">
  <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>

edited Apr 10, 2018 at 19:57

answered Apr 10, 2018 at 19:37

Taplar

25k4 gold badges24 silver badges36 bronze badges

10 Comments

Lazy Artist SQuex Over a year ago

Thanks you all for help. You are really helpfull. I've already done this thanks to other someguy. One more thing, do you now any way to make text appear more smootly. Like transition-duration in css?

Taplar Over a year ago

You mean like a fade in? @LazyArtistSQuex

Taplar Over a year ago

@LazyArtistSQuex I gave them a fade in, fade out effect

Lazy Artist SQuex Over a year ago

Exactly. So it look more smooth

Lazy Artist SQuex Over a year ago

Sorry man, but it seems like your code doesn't work on me:c But @Myles works and there's no fadeIn

|

Myles · Accepted Answer · 2018-04-10 19:42:24Z

0

Seems like this is kind of what you're trying to do.

function changeMyText(obj, text) {
  var workingObj = obj.children;
  var oneDeeper = workingObj[0].children;
  oneDeeper[0].innerHTML = text;
}

<div class="kontakt-block color1" onmouseover="changeMyText(this, 'Changed text 1')" onmouseout="changeMyText(this, 'Email')">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="kontakt-block color2" onmouseover="changeMyText(this, 'Changed text 2')" onmouseout="changeMyText(this, 'Phone')">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="kontakt-block color3" onmouseover="changeMyText(this, 'Changed text 3')" onmouseout="changeMyText(this, 'Facebook')">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Facebook</span>
  </div>
</div>

edited Apr 10, 2018 at 19:42

answered Apr 10, 2018 at 19:30

Myles

5353 silver badges15 bronze badges

2 Comments

Lazy Artist SQuex Over a year ago

It works perfectly! Thank you Sir and all of you? One more thing, do you now any way to make text appear more smootly. Like transition-duration in css?

Lazy Artist SQuex Over a year ago

Okay, nevermind. Someone did this in javascript below. But thanks, your code worked for me at first!

MaxZoom · Accepted Answer · 2018-04-11 17:31:54Z

0

With pure JavaScript and CSS for transition:

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

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

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

var divs = document.getElementsByClassName('kontakt-block');
for (var div of [...divs]) {
  div.addEventListener("mouseover", changeText, false);
  div.addEventListener("mouseout", defaultText, false);
}

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

.text-display {
  opacity: 1;
}

<div class="kontakt-block color1" data-default="Email" data-sample="[email protected]">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="kontakt-block color2" data-default="Phone" data-sample="123-456-7890">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="kontakt-block color3" data-default="Facebook" data-sample="Login with FB">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Facebook</span>
  </div>
</div>

edited Apr 11, 2018 at 17:31

answered Apr 10, 2018 at 19:38

MaxZoom

7,7635 gold badges30 silver badges45 bronze badges

3 Comments

Myles Over a year ago

This uses the same mouseover text for all of them, but the OP seems to need different text for each one.

Lazy Artist SQuex Over a year ago

Thanks you all for help. You are really helpfull. I've already done this thanks to other someguy. One more thing, do you now any way to make text appear more smootly. Like transition-duration in css?

MaxZoom Over a year ago

Added transition duration in CSS

Collectives™ on Stack Overflow

Replace text of element on hover jQuery JS

4 Answers 4

3 Comments

10 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

10 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related