Jquery text toggle

Question

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();
  });

what you mean with "different texts"? You have some sentences and want to show them randomly? — BernaMariano
– BernaMariano, Commented May 28, 2012 at 22:23
You can check my answer if you find it's correct stackoverflow.com/questions/10790911/jquery-text-toggle/… — BernaMariano
– BernaMariano, Commented May 28, 2012 at 22:40

BernaMariano · Accepted Answer · 2012-05-28 22:39:25Z

1

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/

edited May 28, 2012 at 22:39

answered May 28, 2012 at 22:14

BernaMariano

8662 gold badges9 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Over a year ago

Yes :D That are the different sentences i was talking about. I was thinking something like that. What am i doing wrong? jsfiddle.net/ssDT2/2

BernaMariano Over a year ago

Sorry i couldn't hardly understand the code you just sent me. You didn't set the sentences, I don't know what you mean with $('.cText').text($(this.attr('id')));

Simon Dorociak · Accepted Answer · 2012-05-28 22:20:19Z

1

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

answered May 28, 2012 at 22:20

Simon Dorociak

33.5k10 gold badges70 silver badges107 bronze badges

Comments

CD Smith · Accepted Answer · 2012-05-28 23:19:00Z

1

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

edited May 28, 2012 at 23:19

answered May 28, 2012 at 22:17

CD Smith

6,6377 gold badges42 silver badges66 bronze badges

5 Comments

John Over a year ago

Is there a possibility to have different texts for different links or di o just have to use code as many times?

John Over a year ago

I have different icons (links). If you hover those icons, an icon description text shows up. Now i would like to know if there is a way to solve this with variables, or should i just multiply code as many times for all the icon IDs.

CD Smith Over a year ago

Well all of your links can have a class on them and instead of using the ElementID you can use the class name <div class="container"></div> and then $(".container").html("wazaap"); so that all links with that class call the same event

CD Smith Over a year ago

@user6613 I updated my answer with a test using a class opposed to each link having it's own individual customization... didn't quite work like I was thinking... have a look at the fiddle and see jsfiddle.net/cZCRh/4

John Over a year ago

Yes, but yours is interesting too, because it grabs text from the alt attribute, so i dont have to edit javascript code. I think im just gonna build a new code, using best solutions from all the answers. Thanks guys ;)

Collectives™ on Stack Overflow

Jquery text toggle

3 Answers 3

Edit

JS

HTML

2 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit

JS

HTML

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related