javascript - 列出悬停时更改类的项目
问题描述
所以我有以下代码HTML
<ul id="list-group" class="list-group">
<li class="list-item"><a href="#"><i class="fa fa-twitter"></i><span class="span-social">Twitter</span></a></li>
<li class="list-item"><a href="#"><i class="fa fa-instagram"></i><span class="span-social">Twitter</span></a></li>
<li class="list-item"><a href="#"><i class="fa fa-facebook"></i><span class="span-social">Twitter</span></a></li>
<li class="list-item"><a href="#"><i class="fa fa-github"></i><span class="span-social">Twitter</span></a></li>
</ul>
CSS:
.social ul a {
display: block;
padding: 1em 1em;
background-color: #fca311;
color: white;
}
ul a .span-social {
display: none;
opacity: 0;
margin-left: 5px;
-webkit-transition: display .5s linear, opacity .33s linear;
transition: display .5s linear, opacity .33s linear;
}
ul a .show {
display: inline-block;
opacity: 1;
}
JS:
var x = document.getElementsByClassName('list-item');
for (var i = 0; i < x.length; i++) {
x[i].addEventListener('mouseover', () => {
var li = document.getElementsByClassName('span-social');
for (var i = 0; i < li.length; i++) {
var showli = li[i];
if (showli.style.display === "none") {
showli.className = "span-social show";
} else {
showli.className = "span-social";
}
}
})
}
但我不能让它工作,我在控制台中检查它,没有发现错误。试图遍历列表并特别处理每个项目(添加事件 mouseover )但仍然没有效果。
解决方案
推荐阅读
- elixir - mix.exs 文件中的 Elixir 版本要求无效
- java - 具有任何深度的嵌套项目的 Recyclerview
- python - 使用 Python 执行动态 SQL 但收到异常
- python - Kivy - 如果满足条件,如何更改每个文本输入的颜色
- c# - ASP.NET Core MVC/WebAPI 身份验证方案加匿名
- gerrit - 如何使用新补丁集在 Gerrit 中保留批准
- c++ - 使用 boost 套接字禁用 TIME_WAIT
- python - 如何找到 DBSCAN 的最佳参数?
- python-3.x - 尝试使用 tkinter gui 停止 Python 语音识别循环
- javascript - 范围问题 - 在回调中更改数据正在更改更高范围