javascript - 鼠标悬停时替换包含的元素文本

Question

我只是看了一下一位用户对有关通过鼠标悬停切换内容的问题的回答。我指的答案在这里:https://stackoverflow.com/a/3088819/532645

我试图弄清楚如何调整下面的代码，以便当用户将鼠标悬停在关联 LI 元素的任何区域时，只有某些指定的文本发生更改。

在本例中，您可以看到当用户将鼠标悬停在包含该 H3 标记的 LI 元素上时，我试图触发 H3 文本的替换。

有什么想法可以快速解决这个问题吗？代码如下...

<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>

Answer 1

2 个小改动。

1.hover事件必须更改为LI元素，而不仅仅是h3。所以:变化:

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

致:

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

2.由于这一变化，this"is"li 元素。您想更改其中包含的 H3 ，因此您可以使用:

find("h3")

例如:

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

把它们放在一起:

<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>