javascript - 如何将类添加到div中的当前事件div

Question

我几乎没有类似内容的类似 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 添加。

Answer 1

$(this).find('.c-lb-text-zone').addClass('c-lb-tz-full');

和

$(this).find('.c-lb-text-zone').removeClass('c-lb-tz-full');

它只会影响特定 div 的子元素。