Replace contained element text on mouseover

Question

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>

if you're storing something like HTML in a non-standard HTML attribute, you may want to check out `.data` : http://api.jquery.com/data/ — jackwanders, Aug 23 '12 at 14:50

Ofir Baruch · Accepted Answer · 2012-08-23T15:01:35.420

1

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>

edited Aug 23 '12 at 15:01

answered Aug 23 '12 at 14:48

Ofir Baruch

10,323
2
26
39

would you mind updating your answer by including the full script modified with your suggestions so I can accept your answer? thanks – NetConstructor.com Aug 23 '12 at 14:58
Is that answering your question? – Ofir Baruch Aug 23 '12 at 15:02
Excellent! accepted as the answer. Only followup question for you relates to understanding if this approach is a good one or if there is a better/more compliant way of achieving theses goals compared to this approach – NetConstructor.com Aug 23 '12 at 15:06
It's more logical that way , because the `hover` is on the `li`, and the `h3` is a "child" of that specific `li`. The only thing I didn't understand is why do you have 2 functions in the hover event? – Ofir Baruch Aug 23 '12 at 15:08
just to confirm Ofir - your saying the approach utilized is indeed the correct one and in turn the script modification you posted represents this approach correct? I was just confused because of your mention of the 2 functions there – NetConstructor.com Aug 24 '12 at 11:55
There's no 'good' or 'bad' approach. It's just about a "logical" and "easy-to-understand" approach. – Ofir Baruch Aug 24 '12 at 11:55
your so darn fast in responding its crazy - your like a bot – NetConstructor.com Aug 24 '12 at 11:56

Replace contained element text on mouseover

1 Answers1