I'm trying to display text from one ID in another, but it only works once. So I load the page, hover over the title with the ID and then another and it just stays on the first one.

HTML

<div class="cp_widget_content" id="portfolio_content_area">

<b class="cp_widget_title" id="portfolio_title_area">'.get_the_title().'</b>';

<div id="title_hover">Test</div>

jQuery

  jQuery(document).ready(function() 
    { 
        (function ($) 
        { 
            $('#portfolio_title_area').hover(function()
            {
                $('#title_hover').text($('#portfolio_title_area').text());
            });
        })(jQuery);
    });

I'm trying to display text from one ID in another, but it only works once. So I load the page, hover over the title with the ID and then another and it just stays on the first one.

HTML

<div class="cp_widget_content" id="portfolio_content_area">

<b class="cp_widget_title" id="portfolio_title_area">'.get_the_title().'</b>';

<div id="title_hover">Test</div>

jQuery

  jQuery(document).ready(function() 
    { 
        (function ($) 
        { 
            $('#portfolio_title_area').hover(function()
            {
                $('#title_hover').text($('#portfolio_title_area').text());
            });
        })(jQuery);
    });

• javascript
• jquery
• html
• css

• Are you saying that when you hover over one id you are trying to view another id and hide others? – AG_BOSS Commented Apr 18, 2018 at 7:15
• When I hover over the first ID, the output text just stays the same even when I hover over other ID's. – Eric Graventein Commented Apr 18, 2018 at 7:17
• Just a note on the side, jQuery(function ($) {/* code here*/}); could replace all the boilerplate code you wrap your jQuery object with. – Yoshi Commented Apr 18, 2018 at 7:18
• 1 are you using id duplicately?? – Suresh Ponnukalai Commented Apr 18, 2018 at 7:21
• You have used jQuery instead of javascript. For the Js version, you can check my post below. – AG_BOSS Commented Apr 18, 2018 at 7:31

6 Answers 6

To me, your ments indicate that you have multiple titles, which should be displayed in #title_hover when hovering. If so, don't use ids, use a class selector, e.g.:

jQuery(function ($) {
  // keep a reference to the target, so we
  // don't need to query on every enter/leave
  const $title = $('#title_hover');
  
  // store original text
  const fallback = $title.text();

  $('.cp_widget_title').on({
    // on enter
    'mouseenter': function() {
      // overwrite with text from hovered element
      $title.text($(this).text());
    },
    // on leave
    'mouseleave': function() {
      // reset to previous text
      $title.text(fallback);
    },
  })
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b class="cp_widget_title">Some title 1</b>
<b class="cp_widget_title">Some title 2</b>
<b class="cp_widget_title">Some title 3</b>
<b class="cp_widget_title">Some title 4</b>
<div id="title_hover">Test</div>

On a side note, regarding the boilerplate to get a reference to jQuery as $ in noConflict-mode, instead of:

jQuery(document).ready(function() { 
    (function ($) { 
        // code
    })(jQuery);
});

you can use the following, which is equivalent:

jQuery(function ($) {
    // code
});

Try this code.

jQuery(document).ready(function() 
    { 
        (function ($) 
        { 
            $('#portfolio_title_area').hover(function()
            {
                $('#title_hover').text($('#portfolio_title_area').text());
            }, function() {
                $('#title_hover').text('');
            });
        })(jQuery);
    });

It's because you once change it and never ask it to change back when you're done hovering:

  jQuery(document).ready(function() 
    { 
        (function ($) 
        { 
        		var text = $('#title_hover').text();
            $('#portfolio_title_area').mouseover(function()
            {
                $('#title_hover').text($('#portfolio_title_area').text());
            });
            $('#portfolio_title_area').mouseout(function()
            {
                $('#title_hover').text(text);
            });
        })(jQuery);
    });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp_widget_content" id="portfolio_content_area">

<b class="cp_widget_title" id="portfolio_title_area">'.get_the_title().'</b>';

<div id="title_hover">Test</div>

Use mouseover and mouseout instead of hover.

Add mouseleave function

 jQuery(document).ready(function() 
{ 
    (function ($) 
    { 
        $('#portfolio_title_area').hover(function()
        {
            $('#title_hover').text($('#portfolio_title_area').text());
        });
            $('#portfolio_title_area').mouseleave(function()
        {
            $('#title_hover').text('Test');
        });
    })(jQuery);
});

function disp(idname)
{
 var x=document.getElementById(idname).innerHTML;
 document.getElementById("title_hover").innerHTML=x;
}
function def()
{
 document.getElementById("title_hover").innerHTML="Test";
}

<div class="cp_widget_content" id="portfolio_content_area">
</div>
<b class="cp_widget_title" id="portfolio_title_area" onmouseover="disp(this.id)" onmouseout="def()">'.get_the_title().'</b>';
<br><br><br><hr>
<div id="title_hover">Test</div>
<hr>

JScript version...

You are using IIFE (i.e Immediately Invoked Function Expression)

((function ($) 
{ 

})(jQuery);

This is executed only once and that too even before document.ready is executed. So it is working only once.

You can even do it without IIFE.