1

我只是看一下一位用户关于通过鼠标悬停切换内容的问题的答案。我指的答案在这里：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>
4

1 回答 1

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>
于 2012-08-23T14:48:34.890 回答