如何解决悬停效果不佳
简而言之,我试图在我的简历上添加一个悬停效果。
我希望有人将鼠标悬停在我的linkedin图标上,以便在其下方显示“ LinkedIn”文字 但是我需要使用Javascript。
html部分<a href="link" id="liIcon" target="_blank"><i class="icon-linkedin"></i></a>
<div id="popup">LinkedIn</div>
js部分
var e = document.getElementById('liIcon');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
和CSS部分
#popup {
display:none;
}
知道为什么它不起作用吗?
谢谢。
解决方法
我注意到.sql
之后缺少一些分号。我不是JS方面的专家,但未终止的声明看起来很奇怪。
此外,我在按钮上添加了LinkedIn文本,因为在下面的代码中没有可见的图像链接。这是应该如何构造代码以使代码正常工作(假设您的浏览器未禁用JavaScript):
onmouseover
没有悬停:
悬停:
,有时候选择器会变得繁琐,我遇到了嵌套在其他元素中的标签问题,类似于您在此处看到的问题。
您是否也尝试过将事件监听器添加到icon标签?
var icon = document.getElementById('liIcon').getElementsByClassName('icon-linkedin');
// assuming there is only one element of class: icon-linkedin,access element by index 0
icon[0].onmouseover = function () {
document.getElementById('popup').style.display = 'block';
};
icon[0].onmouseout = function () {
document.getElementById('popup').style.display = 'none';
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。