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“是”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>

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

1 个答案: