修改

Question

我正在尝试进行jquery文本切换。如果您翻转元素，文本旁边会显示文本，反之亦然，当您离开元素区域时，它会消失。

我的代码还没有用。另外，我想为不同的链接包含不同的文本。如果有更简单的方法请建议。

HTML

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

JS

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

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

Answer 2

更新

基于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周围缺少引号

Answer 3

尝试使用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>

此致

Jquery文本切换

3 个答案:

修改

JS

HTML