jquery hover работает над одним div, а не над другим - PullRequest
Новая
       12

jquery hover работает над одним div, а не над другим

0 голосов
/ 07 января 2010

У меня есть два деления следующим образом: 

<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

Вы можете увидеть это там, "просматривая все" и зависая над ним.

Спасибо за любую помощь!

Ответы [ 3 ]

2 голосов
/ 07 января 2010

Id browse-all-button следует использовать только один раз, потому что это идентификатор. Используйте класс вместо. Например: 

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

И 

$('.browse-all-button').hover(...
0 голосов
/ 07 января 2010

Одна вещь, которую я заметил, это то, что вы используете идентификатор обзора всех кнопок в обоих div. Это заставит 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})
   });
});

Надеюсь, это поможет!

Метрополис

0 голосов
/ 07 января 2010

У вас есть browser-all-button в качестве идентификатора для обоих div. Идентификаторы должны использоваться только один раз на всей странице, классы могут использоваться более одного раза. Поменяйте местами то, что у вас есть для идентификаторов и классов, затем используйте $(".browse-all-button")

, например 

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