由于css树，无法添加或删除类。JQuery中的所有内容{单击并悬停)
由于css树，无法添加或删除类。JQuery中的所有内容{单击并悬停)
提问于 2016-07-29 12:51:01
我想悬停在一个项目上，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。但正如您所看到的，这就是它的显示方式。
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-29 13:54:31
我摆弄了一下解决方案：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的特殊性，您需要修复它。
希望这对你有所帮助，这正是你所需要的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38650717
复制相关文章
相似问题
腾讯云开发者
