Question

我有两个div如下：

<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是一个：

$(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})
                        })

        } );

效果适用于第一个＃browse-all-button，但不适用于第二个。我在那里有警告告诉我当前的div类是什么，它甚至没有在第二个div上触发。

http://www.raceramps.com/v2

你可以通过“浏览所有”并将鼠标悬停在那里看到它。

感谢您的帮助！

Answer 1

ID browse-all-button应该只使用一次，因为它是一个id。请改用类。例如：

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

和

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

Answer 2

您有browser-all-button作为两个div的ID。 ID应该只在整个页面上使用一次，类可以多次使用。交换id和类的内容，然后使用$(".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

我注意到的一件事是你在两个div上都使用了全浏览的id。这会导致javascript无法知道您想要的元素。您应该将HTML更改为我认为的以下内容。

<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>

我还将连字符改为下划线。最好使用它们。以下是您的javascript在此实例中的更改方式。

$(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})
   });
});

希望这有帮助！

大都市

jquery悬停在一个div上工作，而不是另一个

3 个答案: