Исчезать и исчезать ссылки

Question

Пожалуйста, кто-нибудь может мне помочь в этом простом сценарии...

<script>
$(".offr-list-desc-anch").hide();
$(function () {
    $(".grey-shadow").hover(function () {
        $(".offr-list-desc-anch").stop().fadeIn()
    }, function () {
        $(".offr-list-desc-anch").stop().fadeOut();
    });
});
</script>

Я использую это для постепенного увеличения и уменьшения количества ссылок, но когда я наведу на них одну ссылку, эффект произойдет со всеми остальными ссылками... Я просто хочу, чтобы эффект вступил в силу только для ссылки, на которую указывает ссылка...

это мой HTML

<a href="#" class="offr-list-itm grey-shadow">
    <div class="offr-list-desc-txt"> 
    <img width="223" height="159" border="0" class="grey-shadow" src="images/sportive_suit.jpg">
      <div class="offr-list-desc-anch" >
        <div class="offr-list-item-detls">
          <div class="price"><span class="price-value">200</span><span>LE</span></div>
          <div class="discount-box">
            <div class="off"><span class="price-detalis-tit">Discount</span> <span class="save-currency">50 <span class="save-currency-symbol">%</span> </span> </div>
            <div class="save"> <span class="price-detalis-tit">You Save</span> <span class="save-currency"> 200 <span class="save-currency-symbol"> LE </span></span> </div>
          </div>
        </div>
        <p class="more-offers-unitit"> L.E 200 Instead of L.E 400 for 1 Month of Self Defense Classes from Circle Aikido</p>
      </div>
   <script>
  $(".offr-list-desc-anch").hide();
  $(function(){
      $(".grey-shadow").stop().hover(function(){

          $(".offr-list-desc-anch").fadeIn()
          },function(){$(".offr-list-desc-anch").stop().fadeOut();
              });

              return false;

      });
  </script>
 </div>
</a>

Answer 1

Вам нужно указать цель, которая специфична для текущего элемента наведения, чтобы он не влиял на другие элементы. Так что попробуйте так:

$(function () {
    $(".offr-list-desc-anch").hide();
    $(".grey-shadow").hover(function () {
        $(this).find(".offr-list-desc-anch").stop().fadeToggle(); //find the element specific to hovered anchor tag element
    });
});

скрипка

Также не оборачивайте сценарии внутри элемента div, вам не нужно этого делать.

Answer 2

Пытаться

$(".grey-shadow").hover(function () {
  $(this).next().stop().fadeIn()
}, function () {
  $(this).next().stop().fadeOut();
});

Идея состоит в том, чтобы использовать вашу точку наведения в качестве ссылки, а не весь DOM.