1

jquery テキストのトグルを作成しようとしています。要素をロールオーバーすると、テキストがその横に表示され、その逆の場合、要素領域を離れるとテキストが消えます。

私のコードはまだ動作しません。また、リンクごとに異なるテキストを含めたいと思います。もっと簡単な方法があれば提案してください。

HTML

<div id="container"></div>
<a href="#" id="ovr">clickclickclick</a>

JS

$("#ovr").mouseenter(function() {
    $(#container).html("wazaap");
  }).mouseleave(function() {
    $(#container).html();
  });
4

3 に答える 3

1

関数でやってみてくださいhover()。コードがよりクリーンになります。

基本的な例：

jQuery：

$("#container").hover(
function() {
  $('.cText').text("click");
},
function() {
    $('.cText').text("");
});

CSS：

#container {
      position: relative;
      background-color: #EEEEEE;
      width: 100px;
      height: 100px;
      position: relative;
      display: block;
  }

HTML：

div id="container"></div><span class="cText"></span>

よろしく

于 2012-05-28T22:20:19.047 に答える
1

jQueryセレクターの引用符を忘れています：

$("#ovr").mouseenter(function() {
    $("#container").html("wazaap");
}).mouseleave(function() {
    $("#container").html("");
});

編集

別の文が必要な場合は、次のようにすることができます。

JS

var description=new Array();
description["one"]="Here comes the first";
description["two"]="And here the second";
description["three"]="Now let's have the third";
description["four"]="Finally the last one, fourth";
$("a.link").mouseenter(function(){
    $("span#description").text(description[$(this).attr("id")]);
}).mouseleave(function(){
    $("span#description").text("");
})​

HTML

<a href="#" class="link" id="one">one</a>
<a href="#" class="link" id="two">two</a>
<a href="#" class="link" id="three">three</a>
<a href="#" class="link" id="four">four</a>

<span id="description"></span>​

ここで動作を確認してください http://jsfiddle.net/Wpe2B/

于 2012-05-28T22:14:40.627 に答える
1

アップデート

OPのコメントに基づいて、いくつかのリンクを使用してテキストを表示したいので、これを試しました：

http://jsfiddle.net/cZCRh/4/

すべてのリンクが同じテキストを取得するため、クラスではうまく機能しません

これは動作しますhttp://jsfiddle.net/cZCRh/1/

<div id="container"></div>
<a href="#" id="ovr">clickclickclick</a>

$("#ovr").mouseenter(function() {
    $('#container").html("wazaap");
}).mouseleave(function() {
    $("#container").html("");
});
​

問題は、mouseleave が間違った場所にあり、要素 ID を囲む引用符が欠落していたことです。

于 2012-05-28T22:17:31.773 に答える