Question

我需要一些帮助！我正在做网站，而且我遇到了问题。我有一个<h1>和旁边的图像，该图像是一个问号。我希望当我将鼠标悬停在那个问号上时，它显示出我用信息制作的div ...我在该论坛中看到了很多主题，但没有一个能够正常工作，请帮助我！

<html>
<body>
<h1>branch<img id="help" src="Questionmark.png"></img></h1>
<div id="information">Branch is...</div>
<script>
var e = document.getElementById('help');
e.onmouseover = function() {
document.getElementById('information').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('information').style.display = 'none';
}
</script>
</body>
</html>

请告诉我该怎么做，也许有一个简单的方法......我试过css但也没有工作......

Answer 1

我建议使用css。

如果您正在进行布局，请使用CSS，如果您要设置外观   使用CSS，如果你做动画使用CSS3

如果您附加事件处理程序或对用户输入作出反应，请使用JavaScript。

请注意，人们使用JavaScript代替CSS来支持浏览器。   还有其他解决方案，如使用模拟CSS功能   的JavaScript。

source

<强> CSS

#information{
    display:none;
}

h1:hover + #information{
    display:block;
}

fiddle

Answer 2

如果您想要简单的工具提示，那么您可以使用此代码

<h1>
     branch<img id="help" src="Questionmark.png"></img>
     <div id="information">Branch is...</div>
</h1>

h1{
    position: relative;
}
h1 img{
    cursor: pointer;
}
#information{
    display: none;
    position: absolute;
    left: 50px;
    width: 100px;
    height: 50px;
    font-size: 14px;
    background: red;
}
h1 img:hover + #information{
    display: block;
}

点击此链接http://jsfiddle.net/amoljawale/G83WB/2/

Css悬停文本信息

2 个答案: