Jquery div selection? 마우스 오버시

Question

CSS 요소를 변경하려면 외부 div를 선택하는 데 문제가 있습니다.

내가했다 : 원하는 효과에 근무

<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의 구조는 매우 같다 : 사용자 .totalshares 가리키면 I 그것이 totalshares, shareimage, newsbutton 숨겨하고 homenetworks을 표시하고자

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

. (css 클래스 .hidden 하에서 display : none을 사용 함으로서).

누구나 잘못된 생각이 들었습니다. div 구조에서 레벨을 검색 할 수 없습니까?

감사

Answer 1

모두 catlink 및 shareimage 그래서 .find() 그들에게 당신은이 경우에 CSS를 사용할 필요가없는

$(".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>

Answer 2

을 찾을 수 없습니다 shares하지 자손의 형제입니다 대신 JQuery에서 hide() 메서드를 사용하고 선택기의 각 클래스를 참조 할 수 있습니다. 당신이 CSS 로직을 필요로하지 않는

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

특히 이것은 당신이

Answer 3

첫 번째 코드를 추가하고 .shares에 대한 높이와 너비를 지정하는 것은 다른 모든 div의를 숨길 수, 일을하고 homenetworks

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

를 표시합니다