Jquery 文本切换

Jquery text toggle

本文关键字：文本 Jquery      更新时间：2023-09-26

我正在尝试进行jquery文本切换。如果将鼠标悬停在元素上，则文本将显示在其旁边，反之亦然，当您离开元素区域时，文本将消失。

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

.HTML 

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

.JS

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

你忘记了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/

尝试使用hover()函数来做到这一点。代码会更干净。

基本示例：

j查询： 

$("#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>

问候

更新

基于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("");
});
​

问题是鼠标离开在错误的位置以及元素ID周围缺少引号

相关文章：