CODEWITHSUNDEEP
javascriptjqueryhtml
xan
xan

Reputation: 4696

Custom show/hide links

I plan to apply a custom show/hide effect on link, such that when a user hovers on a link, a different link appears in its place. I'm not so good in javascript and here is what I was trying:

<div id="nav">
    <a href="#"><li id="a1">hover link 1</li></a>
    <a href="#"><li id="a2">show link 1</li></a>
    <a href="#"><li id="b1">hover link 2</li></a>
    <a href="#"><li id="b2">show link 2</li></a>
    <a href="#"><li id="c1">hover link 3</li></a>
    <a href="#"><li id="c2">show link 3</li></a>
</div>

The javascript:

$("#nav a.li").hover(function () {
    (this.id.charAt(0)+"1").hide();
});

Here is the fiddle

Upvotes: 1

Views: 80

Answers (1)

Adil
Adil

Reputation: 148130

You missed $ and need to add # befor id your also need to change selector as you do not have anchor with class li

Change

(this.id.charAt(0)+"1").hide();

to

$('#' +this.id.charAt(0)+"1").hide();

Your code would be

Live Demo

$("#nav a li").hover(function () {
    $('#'+ this.id.charAt(0)+"1").hide();
});

Edit If you want to remove the item being hovered then use $(this)

Live Demo

$("#nav a li").hover(function () {
    $(this).hide();
});

Upvotes: 2

Related Questions