2

i am new to jQuery and i am having some rollover issues, i am trying to apply the same "roll over" effect to multiple divs, and it seems to work, the only thing is when i roll over an element all of my divs get the same effect, when i would like them to apply the effect one at a time on mouse over, here is my code 

  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-tab').toggleClass('pheader-bar-selected');
  });
  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-fline').toggleClass('pfooter-bar-selected');
  });

I do realize that i have the same classes on all of my divs but i was hoping to find a way to do this with out giving every single div a unique class or id, any help would be amazing thank you!

Anand Shah
  • 14,575
  • 16
  • 72
  • 110
Logan
  • 23
  • 1
  • 3

2 Answers2

2

You might take a look at $(this).

Explained at: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Here is how I use it to give you an example

// megalink hover
$("div.megalink").hover(function(){
    $(this).css('background','#e1eefd');
    $(this).css('border-bottom','1px solid #0470B8');
 }, function(){
    $(this).css('background','#ffffff');
    $(this).css('border-bottom','1px solid #EBE7DE');
});
cfEngineers
  • 664
  • 6
  • 16
  • thanks for the fast replies! , although still not quite working, its kinda weird im trying to have it so when the user rolls over one element/div it activates 2 different divs,if that makes sense? – Logan Sep 17 '10 at 22:03
0

What you are doing currently is on every hover you toggle the CSS class on all elements selected by div.p-tab, which will be any DIV with the CSS class p-tab.

What you want to do is only toggle the CSS class on elements next to the hovered element in your HTML structure div.pitem.

To find the currently hovered item, in your event use this keyword, and turn it into a jQuery object by using $(this). To find elements next to (adjacent) you will use the siblings function. You can also combine your two hover events.

$('div.pitem').bind('mouseenter mouseleave', function() { 
    $(this).siblings('div.p-tab').toggleClass('pheader-bar-selected');
    $(this).siblings('div.p-fline').toggleClass('pfooter-bar-selected');
}); 


<div class="grid_3 portfolio-item">
    <div class="p-tab pheader-bar">
        <span class="tfm-drpa">&raquo;</span>
    </div>
    <div class="pitem">
        <a href="#"></a>
    </div>
    <h2 class="pcontent">Consectetuer Adipiscing Elit<span class="ptitlelines">///</span></h2>
    <div class="p-fline pfooter-bar"></div> 
</div>
s_hewitt
  • 4,252
  • 24
  • 24
  • thank you for the fast response! her eis my html code, i have 4 blocks of this – Logan Sep 17 '10 at 21:55
  • »

    Consectetuer Adipiscing Elit///

     – Logan Sep 17 '10 at 21:56
  • you can view what im developing here - http://blog.thefragilemachine.com/ thanks again! btw its the 4 big imge type elements right below the logo – Logan Sep 17 '10 at 21:57
  • No problem, looks like you got it working. If my answer solves your problem, please select it as the accepted answer to your question. – s_hewitt Sep 17 '10 at 22:16