时间戳

首页 > 解决方案 > 悬停时删除图像文本

html - 悬停时删除图像文本

问题描述

在图像上，我有一些内容，即 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>

标签： htmlcss

解决方案

使用以下CSS代码执行您想要的操作：

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

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

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

但是，如果您需要真正从您的LTC单词中删除您DOM应该使用JavaScriptor 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();
});

推荐阅读