CODEWITHSUNDEEP
javascriptjqueryhtml
John
John

Reputation: 1629

Jquery text toggle

I am trying to make a jquery text toggle. If you rollover the element, the text appears next to it and vice versa, it dissappears when you leave the element area.

My code does not work yet. Also, i would like to include different texts for different links. If there is a simpler way please suggest.

HTML

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

JS

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

Upvotes: 1

Views: 202

Answers (3)

CD Smith
CD Smith

Reputation: 6607

Update

Base on OP's comments wanting to use several links to show text I tried this:

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

It doesn't quite work with a class because all links get the same text

This works 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("");
});
​

The problem was the mouseleave was in the wrong place as well as missing quotes around the element IDs

Upvotes: 1

BernaMariano
BernaMariano

Reputation: 866

You are forgetting the quotes in the jQuery selector:

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

Edit

If you want different sentences, you can do this:

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>​

Check working here http://jsfiddle.net/Wpe2B/

Upvotes: 1

Simon Dorociak
Simon Dorociak

Reputation: 33495

Try to do it with hover() function. Code will be cleaner.

Basic example:

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>

Regards

Upvotes: 1

Related Questions