css - 通过 js 悬停时显示工具提示,但在 css 中不显示
问题描述
尝试使用 css 切换一些简单跨度的可见性,它似乎不起作用。当用 js 编写时,事件工作正常。有什么问题?
document.getElementById('theme-tooltip').style.display = 'none'
document.getElementById('theme-btn').onmouseover = function(){
document.getElementById('theme-tooltip').style.display = 'block'
}
document.getElementById('theme-btn').onmouseout = function(){
document.getElementById('theme-tooltip').style.display = 'none'
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id = 'startpanel'></div>
<span id = 'theme-tooltip'>tooltip</span>
<div class="icon-bar">
<a id='theme-btn'><i class="fas fa-palette"></i></a>
<a id='hotkeys-btn'><i class="fas fa-keyboard"></i></a>
<a id='settings-btn'><i class="fas fa-cog"></i></a>
<a id='changelog-btn'><i class="fas fa-book"></i></a>
<a id='discord-btn'><i class="fab fa-discord"></i></a>
</div>
#theme-tooltip{
color: white;
position: absolute;
top: 500px;
width: 200px;
height: 30px;
background-color: #000;
border-radius: 5px;
padding: 10px;
font-size: 14px;
line-height: 22px;
text-align: center;
display: none;
}
#theme-tooltip:after{
content: ' ';
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom:10px solid #000;
border-right:10px solid transparent;
position: absolute;
left: 50%;
top: -40%;
margin-left: -10px;
}
#theme-btn:hover #theme-tooltip{
display: block;
}
每当鼠标悬停在主题 btn 上时,都会显示主题工具提示。
解决方案
您编写选择器的方式#theme-btn:hover #theme-tooltip
假定您的工具提示位于#theme-btn 元素内,但事实并非如此。
您是想为每个图标显示相同的工具提示,还是每个图标都有不同的工具提示?如果您需要为每个图标使用不同的工具提示,我会将工具提示元素放在每个标签之后。您还希望将这些图标工具提示对中的每一个包装在一个容器中,以便您可以正确定位每个工具提示:
<div class="icon-wrapper">
<a id='theme-btn'><i class="fas fa-palette"></i></a>
<span id = 'theme-tooltip'>tooltip</span>
</div>
你的CSS看起来像这样:
.icon-wrapper {
display: inline-block;
position: relative;
}
#theme-tooltip{
color: white;
position: absolute;
top: 30px;
left: -100px;
width: 200px;
height: 30px;
background-color: #000;
border-radius: 5px;
padding: 10px;
font-size: 14px;
line-height: 22px;
text-align: center;
display: none;
}
#theme-tooltip:after{
content: ' ';
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom:10px solid #000;
border-right:10px solid transparent;
position: absolute;
left: 50%;
top: -40%;
margin-left: -10px;
}
#theme-btn:hover + #theme-tooltip{
display: block;
}
请注意,position:relative;
图标包装器上的 是您的工具提示的绝对位置相对于图标包装器。
推荐阅读
- angularjs - Angularjs 1 表单验证问题
- javascript - Vuex 状态和 vue-router
- java - 在cplex(Java)中向目标函数添加二次惩罚项
- c# - 为什么用 npoi 编辑后 docx 文件损坏
- android - 尝试从 Firestore 加载时应用关闭
- java - 有什么方法可以从 Spring 中的 AbstractHttpMessageConverter 方法 support() 中获取集合的泛型类型?
- java - Java 流减少
- react-native - SyntaxError:意外的标识符 jest & babel 7 & react-native 0.56
- mysql - 远程访问 MySql 5.7 不起作用
- c++ - 如何从 main.cpp 中的 cpp 文件获取函数结果?