I have a list and I'm trying to change the text of the elements when the mouse is over them. For instance, if i have this list

<ul>
    <li id="first-li">Some text</li>
    <li id="second-li">More text</li>
    <li id="third-li">and more text</li>
</ul>

and the mouse is over the first element, I want the text to change to, for instance, "1st element".

I'm trying to achieve the above using this code:

$(document).ready(function(){

    //when mouse is over, save initial value and replace with newText
    function hover_in(newText){
        console.log(newText);
        var $this = $(this);
        $this.data('initialText', $this.text());
        $this.text(newText);
    }

    //when mouse is over, replace with initial value
    function hover_out(){
        var $this = $(this);
        $this.text($this.data('initialText'));
    }

    $('#first-li').hover(function(){hover_in("NEW TEXT")}, hover_out);
});

I can see the value insert in the arguments of hover_in' "NEW TEXT" printed in the console but the text doesn't change.

Any ideas what I'm doing wrong ?

Thanks in advance !

I have a list and I'm trying to change the text of the elements when the mouse is over them. For instance, if i have this list

<ul>
    <li id="first-li">Some text</li>
    <li id="second-li">More text</li>
    <li id="third-li">and more text</li>
</ul>

and the mouse is over the first element, I want the text to change to, for instance, "1st element".

I'm trying to achieve the above using this code:

$(document).ready(function(){

    //when mouse is over, save initial value and replace with newText
    function hover_in(newText){
        console.log(newText);
        var $this = $(this);
        $this.data('initialText', $this.text());
        $this.text(newText);
    }

    //when mouse is over, replace with initial value
    function hover_out(){
        var $this = $(this);
        $this.text($this.data('initialText'));
    }

    $('#first-li').hover(function(){hover_in("NEW TEXT")}, hover_out);
});

I can see the value insert in the arguments of hover_in' "NEW TEXT" printed in the console but the text doesn't change.

Any ideas what I'm doing wrong ?

Thanks in advance !

• javascript
• jquery
• text

• 2 I think it should be $('#first li'), Please show ul code – Satpal Commented Mar 11, 2015 at 16:18
• api.jquery./first-selector – Leakim Commented Mar 11, 2015 at 16:20
• In hoverIn, you do not send in a reference to the element! $(this) is the window! – epascarello Commented Mar 11, 2015 at 16:21
• @Satpal I've updated the question with the code for the list. Leakim, thanks for the suggestion but it doesn't help since I want to change all the elements and not only the first one. – Let_IT_roll Commented Mar 11, 2015 at 16:23

3 Answers 3

Your problem is that you are creating two functions trying to get the $(this) variable, only available in the hover function.

You have to pass $(this) as a variable for this functions.

$(document).ready(function(){

  //when mouse is over, save initial value and replace with newText
  function hover_in(newText, $this){
    console.log(newText);
    $this.data('initialText', $this.text());
    $this.text(newText);
  }

  //when mouse is over, replace with initial value
  function hover_out($this){
    $this.text($this.data('initialText'));
  }

  $('li').hover(
    function(){
      hover_in("NEW TEXT", $(this));
    }, 
    function() {
      hover_out($(this));
  });
});

Since you are calling hover_in from a function this is not referring to the jQuery element. You need to pass that in the function in order to refer to it.

http://jsfiddle/whoacowboy/mguuknny/

JavaScript

$(document).ready(function(){

    //when mouse is over, save initial value and replace with newText
    function hover_in(t,newText){
        t.data('initialText', t.text());
        t.html(newText);
    }

    //when mouse is over, replace with initial value
    function hover_out(){
        var $this = $(this);
        $(this).html($(this).data('initialText'));
    }

    $('#list li').hover(function(){
        hover_in($(this),"NEW TEXT");
    }, hover_out);
});

html

<ul id="list">
    <li> First element </li>
    <li> Second element </li>
</ul>

<!DOCTYPE htmL>
<html>
  <head>
    <title>Test</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis./ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis./ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis./ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
  </head>
  <body>
    <ul>
      <li id="first">First element</li>
      <li id="second">Second element</li>
    </ul>
  </body>
  <script>
    $(function() {
      var first_maximized = "First element";
      var first_minimized = "1st element";
      var second_maximized = "2nd element";
      var second_minimized = "Second element";
      
      $("#first").hover(
        function() {          
          $("#first").text(first_minimized);          
        },
        function() {
          $("#first").text(first_maximized);
        }
      );
      
      $("#second").hover (
        function() {
          $("#second").text(second_maximized);  
        },
        function() {
          $("#second").text(second_minimized);  
        }
      );
    });
  </script>
</html>

Try this approach.

I used the JQuery method hover which takes two parameters in this case :

• First is the function when mouse in within the element
• Second is the function whien mouse is out of the element