Hover üzerinde dt & dd göster ve gizle

Question

dd & dt için bir geçiş sınıfını kullanıyorum, iyi çalışıyor Ama bunu göstermek için hoverda göstermek istiyorum & hover'ı nasıl kullanacağım? Sen yerli .hover() işlevini kullanabilirsiniz

<div class="navigation"> 
        <dt><?php echo $this->__($_filter->getName()) ?></dt> 
        <dd><?php echo $_filter->getHtml() ?></dd> 
       </div> 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> 
    <script type="text/javascript"> 
    jQuery=$.noConflict(); 
    jQuery(document).ready(function() { 
     jQuery('.navigation dd').hide(); 

     jQuery('.navigation dt').click(function(){ 
       jQuery(this).next('dd').slideToggle('slow'); 
       jQuery(this).toggleClass('glace_navigationlayer-collapsed'); 


      }); 


    }); 
    </script> 

Answer 1

.toggledClass{ 
    display: none; 
} 

... Bu iki geri aramalar, öncelikle üzerinde ne yapmak istediğini fare-izinli yapmak istiyorum ikinci ne fare girin sürer.

$('.navigation').hover(addYourClass, removeYourClass) 

function addYourClass(){ 
    $('.navigation').addClass('toggledClass') 
} 

function removeYourClass(){ 
    $('.navigation').removeClass('toggledClass') 
} 

Answer 2

mouseenter ve mouseleave deneyin.

jQuery('.navigation dd').hide(); 
 
jQuery('.navigation dt').on('mouseenter mouseleave', function() { 
 
    jQuery(this).next('dd').slideToggle('slow'); 
 
    jQuery(this).toggleClass('glace_navigationlayer-collapsed'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<dl class="navigation"> 
 
    <dt>Chrome</dt> 
 
    <dd>by Google</dd> 
 
    <dt>Safari</dt> 
 
    <dd>by Apple</dd> 
 
<dl>

Answer 3

Bu oldukça yalındır olmalıdır. Aşağıdaki kodun neden sizin için çalışmadığından emin değilsiniz.

var $ = jQuery; 
 
$(document).ready(function() { 
 
    $('.navigation dd').hide(); 
 

 
    $('.navigation dt').hover(function(){ 
 
    $(this).next('dd').stop(true).slideToggle('slow'); 
 
    $(this).toggleClass('glace_navigationlayer-collapsed'); 
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navigation"> 
 
    <dt>YOUR DT</dt> 
 
    <dd>YOUR DD</dd> 
 
</div>

Answer 4

gösterebilir ve vurgulu üzerinde öğeleri gizlemek için Javascript kullanmamalısınız. CSS daha iyi bir seçim olacaktır.

+ seçici

.navigation dt:hover + dd { 
 
    display: none; 
 
} 
 

 

 
/*Don't care about this code*/ 
 
.navigation dt { 
 
    background-color: red; 
 
} 
 
.navigation dd { 
 
    background-color: green; 
 
}

<div class="navigation"> 
 
    <dt>dt</dt> 
 
    <dd>dd</dd> 
 
</div>

sonraki kardeş seçecektir. Bu, dt'dan sonra dd'u yerleştirmeniz gerektiği anlamına gelir.