I want to create a hover effect where the CSS changes when hovering over an item, then reverts back to normal when no longer hovered. Additionally, I would like the CSS to change when the item is selected, and return to normal when another item in the same line is selected.
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');
} );
Although the hover effect functions correctly on my local machine, I am having trouble implementing the click selection. Here is a JSFiddle demonstrating the issue.
Thank you