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イベントは、h3 だけでなく、LI 要素に変更する必要があります。したがって: 変更:

$(".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 に答える