悬停时显示标题属性，然后在不悬停时恢复为原始文本

Question

When I hover on either of the 'new-text' divs, I want to replace the text in my first div with the title attribute of the div being hovered on, and then revert back to the original text when no longer being hovered on. I don't think this can be done with CSS.

The original text and the titles are dynamic variables which will change depending on the page you are on, so any solution needs to not have hard coded values in it.

<div class='changing-text'>Original text</div>

<div class='new-text' title='New text 1'>Div 1</div>

<div class='new-text' title='New text 2'>Div 2</div>

Answer 1

You can do it like this:

This saved the original text of the hoved element before we change the text and when you leave/hoverout then we insert the original text again.

var original ="";

$('.new-text').hover(
  function() {
    original = $(this).text();
    $(this).text($(this).attr("title"));
  }, function() {
    $(this).text(original);
  }
);

Demo

 var original =""; $('.new-text').hover( function() { original = $('.changing-text').text(); $('.changing-text').text($(this).attr("title")); }, function() { $('.changing-text').text(original); } );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='changing-text'>Original text</div> <div class='new-text' title='New text 1'>Div 1</div> <div class='new-text' title='New text 2'>Div 2</div>

Answer 2

Hello here is my code simple fix

 $(".new-text").mouseenter(function() { var title = $(this).attr('title'); var orignal = $('.changing-text').text(); $(this).attr('data-orignal',orignal); $('.changing-text').text(title); }).mouseleave(function() { var orgnl = $(this).attr('data-orignal'); $('.changing-text').text(orgnl); });

 .container div { display: inline-flex; } .new-text { display: block; margin: 15px; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='changing-text'>Original text</div> <div class="container"> <div class='new-text' title='New text 1'>Div 1</div> <div class='new-text' title='New text 2'>Div 2</div> </div>

Answer 3

If i am getting you right than try this one.

Yes you think right it is not possible with only css you have to use jQuery for that. Try this solution.

 jQuery(document).ready(function(){ var changing_text = jQuery('.changing-text').text(); jQuery('.new-text').hover(function(){ var title_value = jQuery(this).attr("title"); jQuery('.changing-text').text(title_value); }, function(){ jQuery('.changing-text').text(changing_text); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='changing-text'>Original text</div> <div class='new-text' title='New text 1'>Div 1</div> <div class='new-text' title='New text 2'>Div 2</div>

Answer 4

Try it once yourself first before throwing a question up here, or show your attempt if you have done so

Using CSS :hover selector

.new-text:hover {}

Using Native JS mouseover event

<div onmouseover="()=>{}"></div>

Using jQuery hover event

$(".new-text").hover(()=>{})