javascript - Jquery 文本切换

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>

问候