javascript - JS - 鼠标悬停时隐藏图标并显示文本
问题描述
我在蓝色框中有一个图标列表,我试图隐藏图标+当鼠标在目标框上时显示目标框的一些文本。
[当前][1]
<div class="offer-icons">
<ul class="icons">
<li><a href="https://www.google.com" class="icon-img"><i class="fas fa-tag"></i></a></li>
<li><a href="https://www.google.com"> <i class="fas fa-landmark"></i></a></li>
<li><a href="https://www.google.com"> <i class="fas fa-industry"></i></a></li>
<li><a href="https://www.google.com"> <i class="fas fa-first-aid"></i></a></li>
</ul>
</div>
到目前为止我所拥有的: - 工作:鼠标悬停时更改图标容器的不透明度 - 不工作:隐藏图标('i') - 在中心显示任何类型的文本
const iconsImages = document.querySelectorAll("icon-img");
const inconsMove = () =>{
const boxes = document.querySelectorAll("li");
boxes.forEach(function(elem) {
elem.addEventListener("mouseover", function() {
elem.classList.add("test");
iconsImages.style.visibility = "hidden";
});
elem.addEventListener("mouseout", function() {
elem.classList.remove("test");
});
});
}
[1]: https://i.stack.imgur.com/Aqabv.png
解决方案
您可以将图标和文本放在锚点内,并在悬停时切换文本不透明度。假设您想要图标上的文本。
我也赞成mouseenter
,mouseleave
因为在这种情况下它会更有效。
const boxes = document.getElementsByClassName("icon-img");
Array.from(boxes).forEach((elem) => {
elem.addEventListener("mouseenter", (event) => {
event.target.classList.add('in')
})
elem.addEventListener("mouseleave", (event) => {
event.target.classList.remove('in')
})
});
.icons {
list-style: none;
padding-left: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.icons > li {
padding: .25rem;
}
.icon-img {
display: block;
background-color: rgb(8,22,70);
height: 10rem;
width: 10rem;
position: relative;
text-decoration: none;
}
.icon-img > .fas {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: rgb(112,123,155);
font-size: 4rem;
}
.icon-img > .text {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(112,123,155,.8);
color: #fff;
opacity: 0;
transition: opacity .35s ease-in-out;
}
.icon-img.in > .text {
opacity: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<div class="offer-icons">
<ul class="icons">
<li>
<a href="https://www.google.com" class="icon-img">
<i class="fas fa-tag"></i>
<div class="text">
Tag
</div>
</a>
</li>
<li>
<a href="https://www.google.com" class="icon-img">
<i class="fas fa-landmark"></i>
<div class="text">
Landmark
</div>
</a>
</li>
<li>
<a href="https://www.google.com" class="icon-img">
<i class="fas fa-industry"></i>
<div class="text">
Industry
</div>
</a>
</li>
<li>
<a href="https://www.google.com" class="icon-img">
<i class="fas fa-first-aid"></i>
<div class="text">
First Aid
</div>
</a>
</li>
</ul>
</div>
推荐阅读
- sql - Python 脚本中 SQL 语法中的未知列
- c - 如果哈希映射是键和值的列表,那么什么是唯一键的列表(无值)?
- python-3.x - 将 os.path 转换为 pathlib 模块没有按预期工作
- c# - 如何在 C# 中从一种形式导航到另一种形式?
- gitversion - GitVersion 工具中的 IsDynamicGitRepository 标志是什么
- javascript - 从函数子组件调用类中的回调函数时反应“this”未定义
- ember.js - ember-changeset-validations 未正确验证
- mysql - 如何根据进程ID获取SQL语句?
- amazon-web-services - Get-IAMCredentialReport 中的 AWS Powershell 6 错误
- r - 数据分组可与 Pandas group-by 和 grouper 相媲美