jquery hover working on one div, not the other.

Question

I have two divs as follows:

<div class="car-service" id="browse-all-button">
<p>CAR SERVICE</p>
<span>56" Race Ramps</span>
<span>67" Race Ramps XTs</span>
<span>XTenders</span>
<span>40" Sport Ramps</span>
<span>Roll-Ups</span>
<span>Portable Pit Stop</span>
</div>

  <div class="trailer-hauling" id="browse-all-button">
<p>TRAILER HAULING</p>
<span>56" Race Ramps</span>
<span>67" Race Ramps XTs</span>
<span>XTenders</span>
<span>40" Sport Ramps</span>
<span>Roll-Ups</span>
<span>Portable Pit Stop</span>
</div> 

Jquery is a follows:

$(function(){



            $('#browse-all-button').hover(function(){
            $("p", this).stop().animate({textIndent:"25px", color:"#a12324"}, {duration:200});
            alert($(this).attr("class"));
            },
        function(){
                    $("p", this).stop().animate({textIndent:"10px", color:"#424242"}, {duration:150})
                        })

        } );

The Effect works on the first #browse-all-button, but not on the second. I have an alert in there to tell me what the current div class is, and it's not even triggered on the second div.

http://www.raceramps.com/v2

You can see it there by "browse all" and hovering over.

Thanks for any help!

Answer 1

Id browse-all-button should be used only once, because it's an id. Use class instead. For example:

<div class="car-service browse-all-button">

And

$('.browse-all-button').hover(...

Answer 2

You have browser-all-button as the ID for both divs. ID's should only be used once on the entire page, classes can be used more than once. Swap what you have for id's and classes then then use $(".browse-all-button")

e.g.

<div id="car-service" class="browse-all-button">
...
<div id="trailer-hauling" class="browse-all-button">
...
$('.browse-all-button').hover(...);

Answer 3

Hi Jared!

One thing I notice is you are using the browse-all-button id on both divs. This would cause the javascript to not know which element you want. You should change your HTML to look like the following I believe.

<div id="car_service" class="browse_all_button">
  <p>CAR SERVICE</p>
  <span>56" Race Ramps</span>
  <span>67" Race Ramps XTs</span>
  <span>XTenders</span>
  <span>40" Sport Ramps</span>
  <span>Roll-Ups</span>
  <span>Portable Pit Stop</span>
</div>

<div id="trailer_hauling" class="browse_all_button">
  <p>TRAILER HAULING</p>
  <span>56" Race Ramps</span>
  <span>67" Race Ramps XTs</span>
  <span>XTenders</span>
  <span>40" Sport Ramps</span>
  <span>Roll-Ups</span>
  <span>Portable Pit Stop</span>
</div> 

I also changed the hyphens to underscores. It is better use them. Here is how your javascript would change in this instance.

$(function(){
   $('.browse_all_button').hover(function(){
      $("p", this).stop().animate({textIndent:"25px", color:"#a12324"}, {duration:200});
       alert($(this).attr("class"));
   },
   function(){
      $("p", this).stop().animate({textIndent:"10px", color:"#424242"}, {duration:150})
   });
});

Hope this helps!

Metropolis