JQuery div selection? При наведении

У меня возникли проблемы с выбором внешнего div для изменения элемента css.JQuery div selection? При наведении

Я имел:

<script> 
$(".shares").hover(function(){ 
    $('.homenetworks').removeClass('hidden'); 
    $('.totalshares').addClass('hidden'); 
    $('.catlink').addClass('hidden'); 
    $('.shareimage').addClass('hidden'); 
},function(){ 
    $('.homenetworks').addClass('hidden'); 
    $('.totalshares').removeClass('hidden'); 
    $('.catlink').removeClass('hidden'); 
    $('.shareimage').removeClass('hidden'); 
}); 

</script>

Который работал к желаемому эффекту, однако он применил его к каждому экземпляру этого на странице. Затем я узнал о $(this).find, чтобы повлиять только на выбранный.

<script> 
$(".shares").hover(function(){ 
    $(this).find('.homenetworks').removeClass('hidden'); 
    $(this).find('.totalshares').addClass('hidden'); 
    $(this).find('.catlink').addClass('hidden'); 
    $(this).find('.shareimage').addClass('hidden'); 
},function(){ 
    $(this).find('.homenetworks').addClass('hidden'); 
    $(this).find('.totalshares').removeClass('hidden'); 
    $(this).find('.catlink').removeClass('hidden'); 
    $(this).find('.shareimage').removeClass('hidden'); 
}); 

</script>

Однако это снимает класс от .homenetworks и добавляет класс скрытый в .totalshares, но он больше не эффекты .totalshares и .catlink.

Структура дивы это следующим образом:

<div class="newsbutton"> 
    <div class="catlink"> 
     Link 
    </div> 
    <div class="shareimage"> 
     Img 
    </div> 
    <div class="shares"> 
     <div class="totalshares"> 
     Shares 
     </div> 
     <div class="homenetworks hidden"> 
     Content 
     </div> 
    </div> 
</div>

Я хотел бы, когда пользователь парит над .totalshares она скрывает totalshares, shareimage, newsbutton, а затем показывает homenetworks. (При использовании дисплея: нет под классом css .hidden).

У кого-нибудь есть идеи, возможно, что-то не так, может (это) .find не искать уровни вверх по структуре div?

Благодаря

источник

2014-11-18 KojoSlayer

'(this) .find' выполняет поиск только в дочерних элементах этого элемента. Чтобы избежать использования родных братьев(), подобных Арун П. Джонни, или использовать функцию '.parent()' ', прежде чем использовать' .find() '(это работает только в вашем случае, а не во всех, в зависимости от структуры и родительские элементы.) –

Оба catlink и shareimage являются братья и сестры не shares потомков так .find() не сможет найти их

$(".shares").hover(function() { 
 
    $(this).find('.homenetworks').removeClass('hidden'); 
 
    $(this).find('.totalshares').addClass('hidden'); 
 
    $(this).siblings('.catlink, .shareimage').addClass('hidden'); 
 
}, function() { 
 
    $(this).find('.homenetworks').addClass('hidden'); 
 
    $(this).find('.totalshares').removeClass('hidden'); 
 
    $(this).siblings('.catlink, shareimage').removeClass('hidden'); 
 
});

.newsbutton { 
 
    position: relative; 
 
    height: 80px; 
 
} 
 
.hidden { 
 
    display: none !important; 
 
} 
 
.catlink, 
 
.shareimage { 
 
    display: inline-block; 
 
    width: 48%; 
 
    height: 30px; 
 
} 
 

 
.shares { 
 
    position: absolute; 
 
    top: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="newsbutton"> 
 
    <div class="catlink"> 
 
    Link 
 
    </div> 
 
    <div class="shareimage"> 
 
    Img 
 
    </div> 
 
    <div class="shares"> 
 
    <div class="totalshares"> 
 
     Shares 
 
    </div> 
 
    <div class="homenetworks hidden"> 
 
     Content 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="newsbutton"> 
 
    <div class="catlink"> 
 
    Link 
 
    </div> 
 
    <div class="shareimage"> 
 
    Img 
 
    </div> 
 
    <div class="shares"> 
 
    <div class="totalshares"> 
 
     Shares 
 
    </div> 
 
    <div class="homenetworks hidden"> 
 
     Content 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="newsbutton"> 
 
    <div class="catlink"> 
 
    Link 
 
    </div> 
 
    <div class="shareimage"> 
 
    Img 
 
    </div> 
 
    <div class="shares"> 
 
    <div class="totalshares"> 
 
     Shares 
 
    </div> 
 
    <div class="homenetworks hidden"> 
 
     Content 
 
    </div> 
 
    </div> 
 
</div>

источник

2014-11-18 10:31:11

Не было бы более целесообразным сначала выбрать '.newsbutton', а не' .shares'? – George

@George да .... тогда вы можете закончить его в 3 строках вместо 4 –

Фантастический, я не знал о .siblings! Спасибо. .newsbutton будет иметь URL-адрес, который должен быть доступен по-прежнему. – KojoSlayer

Вам не нужно использовать CSS в этом случае , вместо этого вы можете просто использовать метод hide() в JQuery и ссылаться на каждый класс в вашем селекторе.

$(".shares").hover(function(){ 
    $('.homenetworks').show(); 
    $('.totalshares, .catlink, .shareimag').hide(); 
},function(){ 
    $('.homenetworks').hide(); 
    $('.totalshares, .catlink, .shareimag').show(); 
});

Если вы не требуете CSS логики конкретно это будет работать для вас

источник

2014-11-18 10:34:34

Я предпочитаю решение, добавив «скрытый» класс. '.hide() и .show()' могут быть более быстрыми и удобными, но код лучше читать, если есть html-классы, которые рассказывают вам об их видимости. –

@DerVampyr Да, но это добавляет сложности сценария и противоречит идее использования JQuery-фреймворка, когда классы предоставляются для вас. «Пишите меньше, делайте больше» –

Добавьте свой первый код, а затем указать высоту и ширину .shares, она будет скрывать все другие дивы и показать homenetworks

<style> 
.shares{ 
    width:100px; 
    height:100px; 
} 
</style>

источник

2014-11-18 10:55:34 nikita

JQuery div selection? При наведении

ответ

Смежные вопросы