Question

在图像上，我有一些内容，即LTC。当我将鼠标悬停在图像上时，会出现缩略图，其中包含一些内容，例如文本和按钮。我希望当我将鼠标悬停在图片上时，图片上的文字（即LTC）不应显示。

<div class="col-md-4">
    <div class="view view-eighth">
        <div class="main" style="background-image:url('image/ltc.jpg');">
            <div class="main-text">LTC</div>
            <div class="mask">
                <h2>ABC</h2>
                <div class="hover-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit
                </div>
                <a href="#" class="info">Read More</a>
            </div>                
        </div>        
    </div>        
</div>

Answer 1

在CSS下面使用代码进行所需的操作：

.main:hover .main-text {
    display: none;
}

如果您想顺利执行此操作，请使用以下代码：

.main:hover .main-text {
    opacity: 0;
    transition: opacity .3s;
}

但是，如果您确实需要从LTC中删除DOM字，则应该使用JavaScript或jQuery，请参见以下代码：

$('.main').hover(function(){
    $(this).find('.main-text').remove();
});

但是，如果不需要jQuery，则可以在Vanilla Js以下使用：

var el = document.querySelector('.main');

el.addEventListener('mouseover', function(){
    document.querySelector('.main-text').remove();
});

悬停时删除图片文字

1 个答案: