我几乎没有类似内容的类似 block 。如果我将鼠标悬停在 first block 上,对于 first block 和此 first parent block 类中的另一个 sub-block应该加上。对于第二个 block :如果我将鼠标悬停在 second block 上 second block 和 sub-block in this parent second block 应该添加相同的类。
实际上,我可以为每个 block 分别创建独特的类或标识,但我认为这是不正确的,如果我想添加更多 block ,我必须更改 css、html 和 javascript 代码——这很不舒服。
var Block1 = $('.point-to-black');
ShopBlock1.mouseover(function(){
$(this).addClass('c-lb-black');
$('.c-lb-text-zone').addClass('c-lb-tz-full');
});
ShopBlock1.mouseout(function(){
$(this).removeClass('c-lb-black');
$('.c-lb-text-zone').removeClass('c-lb-tz-full');
});
.point-to-black {
width: 100%;
height: 100px;
transition: 0.5s;
}
.c-lb-black{
background-color: rgba(0,0,0,0.6)!important;
width: 100%!important;
height: 100px!important;
transition: 0.5s;
}
.c-lb-tz-full {
transition: 0.3s;
margin: 0px 0px 0px 33%!important;
padding: 3px 25%!important;
font-size: 25px!important;
transform: skew(-20deg)!important;
background: #c1af25!important;
line-height: 33px!important;
}
.c-lb-text-zone1 {
line-height: 33px;
letter-spacing: 2px;
transition: 0.3s;
margin: 0px 0px 0px 50%;
padding: 3px 15%;
font-size: 25px;
transform: skew(-20deg);
background: #c1af25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="c-link-list">
<li>
<div class="c-lb-blog">
<div class="point-to-black">
<div class="c-lb-text-zone">
<h1>Blog1</h1>
</div>
</div>
</div>
</li>
<li>
<div class="c-lb-blog">
<div class="point-to-black">
<div class="c-lb-text-zone">
<h1>Blog2</h1>
</div>
</div>
</div>
</li>
</ul>
因此,如果我将鼠标悬停在 'point-to-black'
block 'c-lb-black'
class 只为当前 block 添加 good 因为 'this'
指针但是 'c-lb-tz-full'
为所有具有 'c-lb-text-zone'
类的 block 添加。
最佳答案
$(this).find('.c-lb-text-zone').addClass('c-lb-tz-full');
和
$(this).find('.c-lb-text-zone').removeClass('c-lb-tz-full');
它只会影响特定 div 的子元素。
关于javascript - 如何将类添加到div中的当前事件div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55893895/