由于CSS树，无法添加或删除类。 JQuery中的所有内容（单击并悬停）

Question

我想将鼠标悬停在一个项目上，将css更改，将鼠标悬停，返回到正常状态，选择该项目，以及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

我对解决方案进行了摆弄： https : //jsfiddle.net/op4fLwbo/14/

js现在看起来像：

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

我已经更新了js和CSS。 为什么不使用小提琴，是因为您缺少jquery。

注意，在CSS上，由于CSS的特殊性，您需要对其进行修复，因此我对添加的新类添加了重要的信息。

希望对您有所帮助，这就是您所需要的。