CODEWITHSUNDEEP
javascriptjqueryreplacemouseover
NetConstructor.com
NetConstructor.com

Reputation: 343

Replace contained element text on mouseover

I was just take a look at the answer by one user to question regarding switching out content over mouseover. The answer I am referring to is here: https://stackoverflow.com/a/3088819/532645

What I am trying to figure out is how to adapt the code below so that when a user hover over ANY area of the associating LI element only some specified text changes.

In this case you can see I am trying to trigger a replacement of the H3 text when a user hovers over the LI element which contains that H3 tag.

Any ideas which quickly solve this correct? Code is as follows...

<script type="text/javascript">
$( function() {
  $(".homepage-content-columns li h3").hover(
    function () {
      $(this).attr('small',$(this).html());
      $(this).html($(this).attr('full'));
    },
    function () {
       $(this).html($(this).attr('small'));
    }
  );
});
</script>

<ul class="homepage-content-columns">
  <li class="blue spacer">
    <a href="#a">
    <h3 full="Switch Text A">Text A</h3>
    <p>some text here</p>
    </a>
  </li>
  <li class="green spacer">
    <a href="#b">
    <h3 full="Switch Text B">Text B</h3>
    <p>some text here</p>
    </a>
  </li>
  <li class="orange">
    <a href="#c">
    <h3 full="Switch Text C">Text C</h3>
    <p>some text here</p>
    </a>
  </li>
</ul>

Upvotes: 1

Views: 598

Answers (1)

Ofir Baruch
Ofir Baruch

Reputation: 10356

2 Small changes.

1.The hover event must be changed to the LI element , and not just the h3. Therefore: Change:

$(".homepage-content-columns li h3").hover(

To:

$(".homepage-content-columns li").hover(

2.Because of that change , this "is" the li element. You want to change the H3 that wrapped in it , so you can use:

find("h3")

For instance:

var htitle = $(this).find("H3");
 htitle.html(htitle.attr('full'));

Put it all together:

<script type="text/javascript">
$( function() {
  $(".homepage-content-columns li").hover(
    function () {
    htitle = $(this).find("h3");
      htitle.attr('small',htitle.html());
      htitle.html(htitle.attr('full'));
    },
    function () {
       $(this).find("h3").html($(this).find("h3").attr('small'));
    }
  );
});
</script>

Upvotes: 1

Related Questions