CODEWITHSUNDEEP
jquery
user1450479
user1450479

Reputation: 15

jquery .hover() same effect for different elements

I have this scenario:

html:

<a>text</a>
<a>text</a>
<a>text</a>
<a>text</a>

<h4>hi there</h4>
<h4>hi there</h4>
<h4>hi there</h4>
<h4>hi there</h4>

javascript: 

$("h4").hide();
$('a').hover(function () {
  $("h4").addClass('hover').fadeIn(300);
},
function () {
  $("h4").stop(0,0)
     .queue(function(){ $("h4").removeClass('hover').fadeOut(300).dequeue() });
});

​css:

.hover {
    background-color: yellow;
}

this is jsfiddle http://jsfiddle.net/zS6ex/280/

i want that when i hover mouse on a single a single is displayed not all

thanks

​

Upvotes: 0

Views: 461

Answers (4)

gaurang171
gaurang171

Reputation: 9080

I have done complete bins for above query. here is demo link...

Demo: http://codebins.com/bin/4ldqp77

HTML

<div id="panel">
  <a href="javascript:void(0);">
    Link-1
  </a>
  <a href="javascript:void(0);">
    Link-2
  </a>
  <a href="javascript:void(0);">
    Link-3
  </a>
  <a href="javascript:void(0);">
    Link-4
  </a>
  <h4>
    hi there...Header 1
  </h4>
  <h4>
    hi there...Header 2
  </h4>
  <h4>
    hi there...Header 3
  </h4>
  <h4>
    hi there...Header 4
  </h4>
</div>

JQuery

$(function() {
    $("h4").fadeOut();
    $('a').hover(function() {
        $("h4:eq(" + $(this).index() + ")").addClass('hover').fadeIn(300);
    }, function() {
        $("h4:eq(" + $(this).index() + ")").removeClass('hover').fadeOut(300);
    });
});

CSS

a{
  display:inline-block;
  margin:10px;
  border:1px solid #000;
  background:#3A3A3A;
  color:#fff;
  text-decoration:none;
  padding:5px;
  border-radius: 5px;
}
a:hover{
  background:#9C9C9C;
  text-decoration:underline;
  color:#262626;
}

h4{
  display:block;
  border:1px solid #4455bd;
  margin-left:10px;

  width:300px;
  padding:2px;
  background:#a3c4fd;
}
h4.hover{
  background:#ffdf88;
}

Demo: http://codebins.com/bin/4ldqp77

If you want to check effect without fadeOut(), then check jQuery changes on demo link as given below.

Demo: http://codebins.com/bin/4ldqp77/2

Upvotes: 0

Ram
Ram

Reputation: 144679

You need some data to find the target of anchor links. Note that anchor links should have href attributes.

<a href='#first'>text</a>
<a href='#second'>text</a>
<a href='#third'>text</a>
<a href='#fourth'>text</a>

<h4 id='first'>hi there</h4>
<h4 id='second'>hi there</h4>
<h4 id='third'>hi there</h4>
<h4 id='fourth'>hi there</h4>


$('a').hover(function() {
    $(this.hash).addClass('hover').stop().fadeIn(300);
}, function() {
    $(this.hash).stop().fadeOut(300).removeClass('hover')
});

http://jsfiddle.net/CywgQ/

Upvotes: 0

Andrea Turri
Andrea Turri

Reputation: 6500

The h4 is not a child of a element and there is no connection between your a and your h4.

Try maybe to give them an ID or something to target the correct h4 otherwise you can do something like that...

$('a').on('click', function() {
    var i = $(this).index();
    $('h4').eq(i).addClass('hover');            
});​

Here a JsFiddle with an improvement on hovering and .toggleClass().

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You should not .fadeIn() and .fadeOut. It won't be accessible in the ViewPort. Use opacity and animate.

$("h4").css("opacity", 0);
$("h4").hover(function(){
    $(this).addClass("hover").animate({opacity: 1}, 1000);
}, function(){
    $(this).removeClass("hover").animate({opacity: 0}, 1000);
});​

Fiddle: http://jsfiddle.net/zS6ex/288/

Upvotes: 0

Related Questions