Aufgrund der CSS-Struktur kann keine Klasse hinzugefügt oder entfernt werden. Alles in JQuery {click and hover)

Question

Ich würde gerne über ein Element schweben, css ändert sich, schwebt aus, kehrt zurück zum normalen, wählen Sie das Element aus, css ändert sich ebenfalls. Wenn ich es wieder wähle, kehrt es zum Normalzustand zurück. Oder wenn ich ein anderes Element in derselben Zeile auswähle.

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'); 
}); 

auf meinem lokalen Rechner ich in der Lage bin, um es in die und aus zu machen schweben, aber ich bin nicht in der Lage zu machen die Klickauswahl Hier ist ein JSFiddle es funktioniert nicht. Aber wie Sie sehen können, wird es so angezeigt.

Dank

Answer 1

ich eine Geige mit der Lösung gemacht haben: https://jsfiddle.net/op4fLwbo/14/

Die js sieht nun wie:

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

ich die js und die CSS aktualisiert haben. Warum war nicht an Geige arbeiten, weil Sie JQuery vermisst haben.

Notw, auf der CSS habe ich hinzugefügt, um die neuen Klassen hinzugefügt, wegen der Spezifität der CSS, die Sie beheben müssen.

Hoffnung, die Ihnen hilft und es ist, was Sie brauchten.