CSSツリーのため、クラスの追加や削除はできません。 JQueryのすべて（クリックしてホバー）

Question

アイテムにカーソルを置いて、変更を加え、ホバーオフにして、通常に戻ってアイテムを選択し、CSSの変更を加えたいと思います。もう一度選択すると通常に戻ります。または、同じ行の別の項目を選択したとき。私のローカルマシン上

HTML

<div class="body2"> 
        <div class="block" id='block'> 
         <div class="block-header"> 
          <div class="arrow-down" style="left:83px"></div> 

         </div> 
        <div class="block-body"> 
         <p style="margin-top:25px;"></p> 
         </div> 
         </div> 
         <div class="block" id='block'> 
         <div class="block-header"> 
          <div class="arrow-down" style="left:284px"></div> 

         </div> 
        <div class="block-body"> 

         </div> 
         </div> 
        <div class="block" id='block'> 
         <div class="block-header"> 
          <div class="arrow-down" style="left:485px"></div> 
         </div> 
        <div class="block-body"> 

         </div> 
         </div> 
         <div class="block" id='block' style="margin-right:0px;"> 
         <div class="block-header"> 
          <div class="arrow-down" style="left:686px"></div> 

         </div> 
        <div class="block-body"> 

         </div> 
         </div> 
        </div> 

CSS

.body2 .block{ 
display:inline-block; 
border:solid 2px #eaeaea; 
height: 165px; 
width: 180px; 
margin-right: 19px; 
} 
.body2 .block:hover{ 
cursor:pointer 
} 
.body2 .block .block-header{ 
    height: 35px; 
border-bottom: solid 2px #eaeaea; 
width: 180px; 
} 
.body2 .block .block-header .arrow-down{ 
width: 15px; 
height: 15px; 
border: 2px solid #eaeaea; 
transform: rotate(45deg); 
border-top: 0; 
border-left: 0; 
position: absolute; 
left: 10%; 
background-color: #fff; 
z-index: 10; 
top: 74px; 
} 

.body2 .block .block-body{ 
width:174px; 
} 

JS

$('.body2 #block').hover(function(e){ 
    $($(e.currentTarget).find('.block-header')).css('border-color','blue'); 
    $($(e.currentTarget).find('.block-header')).css('background-color','blue'); 
    $($(e.currentTarget).find('.arrow-down')).css('background-color','blue'); 
    $($(e.currentTarget).find('.arrow-down')).css('border-color','blue'); 
    $(e.currentTarget).css('border-color','blue'); 
}, function(){ 
    $('.body2 .block .block-header').css('border-color','blue'); 
    $('.body2 .block .block-header').css('background-color','blue'); 
    $('.body2 .block .block-header .arrow-down').css('background-color','blue'); 
    $('.body2 .block .block-header .arrow-down').css('border-color','blue'); 
    $('.body2 .block').css('border-color','blue'); 
}); 

私はそれが内と外ホバー作ることができています、しかし、私は作ることができないのですクリックの選択。ここにはJSFiddleが機能しません。しかし、あなたが見ることができるように、それはどのように表示されます。

おかげ

Answer 1

私は解決策とフィドル作った：私はJSとCSSを更新した

$('.body2 .block').hover(function() { 
    $(this).find('.block-header').toggleClass('hovered'); 
    $(this).find('.arrow-down').toggleClass('hovered'); 
    $(this).toggleClass('border-hover'); 
}); 

： https://jsfiddle.net/op4fLwbo/14/

jsのは、今のように見えます。なぜあなたがjqueryを欠いていたのかどうかは分かりませんでした。

私は修正する必要があるcssの特異性のために、追加された新しいクラスに重要な要素を追加しました。

あなたとあなたが必要としていることを助ける希望。