如何在div

Question

我有一些内容相似的类似内容。如果我将鼠标悬停在第一个块上，则该第一个父块类中的第一个块和另一个子块应该添加。并且对于第二个块：如果我将第二个块和子块悬停在第二个块中，则该父第二个块< / b>添加相同的类。

实际上，我可以分别为每个块做唯一的类或标识，但是这不正确，如果我要添加更多块，则必须更改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' 块上进行鼠标悬停，则 'c-lb-black' 类由于 {{1} } 指针，但 'this' 会为所有类别为 'c-lb-tz-full' 的块添加。

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的子代。