Jquery targeting / Hover problem

Question

I have two divs, on hover span class=fg grows and changes opacity, span class=bg shrinks, and when you mouseout it returns to the original state.

My problem is in two parts:

1: When hovering over the first div, the same action happens in the second.

2: The hover isn't constrained to the divs, but happens whenever the mouse moves on the page.

HTML:

<div id="wrap">
  <h2>Subtitle</h2>
    <p>
      <span class="bg">Lorem Ipsum has been the</span> 
      <a href="#"><span class="fg"> industry’s standard</span></a> 
      <span class="bg">dummy text ever</span> 
      <span class="fg">since the 1500s,</span>
      span class="bg">when an unknown printer took a galley of type and</span> 
   </p>
</div>

<div id="wrap" class="">
  <h2>Stuff #2</h2>
     <p>
       <span class="bg">Lorem Ipsum has been the</span> 
       <span class="fg"> industry’s standard</span>
       <span class="bg">dummy text ever</span> 
       <span class="fg">since the 1500s,</span>
       <span class="bg">when an unknown printer took a galley of type</span> 
    </p>
</div>

javaScript:

<script type="text/javascript">
$(document).ready(function() {

  $("#wrap").parent().hover (function () {      
  $("span.fg").animate({"opacity": 1, fontSize: '14px'}, 300);
  $("span.bg").animate({fontSize: '7px'}, 300);
 },
  function () {   
  $("span.fg").animate({"opacity": .5, fontSize: '12px'}, 100); 
  $("span.bg").animate({fontSize: '12px'}, 100);}   
 ); 
});

CSS:

body  {background: #000;color: #FFF;font-family: Helvetica, sans-serif;}
p     {font-size:12px;}
#wrap { width: 300px;
    height: 150px;
    cursor: pointer;
    margin: 30px auto;  
    overflow:hidden;
       }
a     {text-decoration:none; color:inherit;}
.bg   {color:#999; opacity: 0.4;}
.fg   {color:#999; opacity: 0.4;}

You have two different `div` with same id. Don't use this approach. Each element's id should be unique. — MD Sayem Ahmed, Jul 06 '11 at 11:44
Is `$("#wrap").parent()` the body element? I'm not sure if you pasted everything, but if that's the case, the `hover` is applied to the body (i.e. the whole page). — pimvdb, Jul 06 '11 at 11:47

score 2 · Accepted Answer · answered Jul 06 '11 at 11:49

The id must be unique, change #wrap to .wrap. Also in your selector you need to give it context of where to find the element otherwise it will target every element with that class. You can achieve this by either passing in this or using find()

$(".wrap").parent().hover(function() {
    $("span.fg", this).animate({
        "opacity": 1,
        fontSize: '14px'
    }, 300);
    $("span.bg", this).animate({
        fontSize: '7px'
    }, 300);
}, function() {
    $("span.fg",this).animate({
        "opacity": .5,
        fontSize: '12px'
    }, 100);
    $("span.bg",this).animate({
        fontSize: '12px'
    }, 100);
});

This also assumes that the parent is a <div> and not a shared parent <div> (e.g. they are not both nested in the same parent)

Example on jsfiddle

Wow, thanks so much for the quick answer! I was having some trouble with 'this.' I don't quite understand why the div needs to be nested in another div. — Sean, Jul 06 '11 at 11:58
I am assuming that you want each `wrap` to work independently when hovered, if they are both nested in the same div using `$("span.fg",this)` will target items in both `Subtitle` and `Stuff #2` example http://jsfiddle.net/markcoleman/3eNZK/3/ — Mark Coleman, Jul 06 '11 at 12:02

score 0 · Answer 2 · answered Jul 06 '11 at 11:44

0

dont use same id for 2 elements

$("#wrap").parent() - is the parent, and you must use $("#wrap") element

answered Jul 06 '11 at 11:44

Vyacheslav Loginov

3,136
5
33
49

score 0 · Answer 3 · answered Jul 06 '11 at 11:50

To make animations sequential in jQuery, you should write your second animation function as the callback of the first animation.

These animations are parallel (they both start at the same time)

$('#first').animate({'left':'50px'});
$('#second').animate({'left':'100px'});

But here, the second animation starts when the first animations is done:

$('#first').animate({'left':'50px'}, function(){
    $('#second').animate({'left':'100px'});
});

Jquery targeting / Hover problem

3 Answers3