悬停效果不佳

贝斯顿·莫巴什里

简而言之，我试图在我的简历上添加一个悬停效果。

我希望有人将鼠标悬停在我的linkedin图标上，以便在其下方显示“ LinkedIn”文本，但是我需要使用Java语言。

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;
  }

知道为什么它不起作用吗？

谢谢。

摩高索斯

我注意到onmouseovers后缺少一些分号。我不是JS方面的专家，但未终止的声明看起来很奇怪。

另外，我在按钮上添加了LinkedIn文本，因为在下面的代码中没有可见的图像链接。这是代码的结构，以便代码可以正常工作（假设您的浏览器未禁用JavaScript）：

<!DOCTYPE html>
<html>
<head>
    <style>
        #popup {
            display: none;
        }
    </style>
</head>
<body>
<a href="link" id="liIcon" target="_blank"><i class="icon-linkedin">LinkedIn</i></a>
<div id="popup">LinkedIn</div>
<script>
    var e = document.getElementById('liIcon');

    e.onmouseover = function () {
        document.getElementById('popup').style.display = 'block';
    };

    e.onmouseout = function () {
        document.getElementById('popup').style.display = 'none';
    };
</script>
</body>
</html>

无悬停：