css悬停文字信息答案

【问题标题】：Css hover text informationcss悬停文字信息
【发布时间】：2014-08-26 14:52:13
【问题描述】：

我需要一些帮助！我正在做网站，我遇到了一个问题。我有一个<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 但也没有用...

【问题讨论】：

您的代码正在运行。似乎是什么问题？
是的，它有效。不过，您可能希望删除不正确的 </img>。
我唯一的建议是使用 CSS 将 #information 设置为 display:none，因此默认情况下该元素是隐藏的。示例：jsfiddle.net/NUBWs
我建议你看看：developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips
谢谢你，现在它似乎正在工作......

标签： javascript jquery html css hover

【解决方案1】：

我建议使用 css。

如果您正在做布局，请使用 CSS，如果您正在设置外观和感觉使用 CSS，如果你做动画使用 CSS3

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

请注意，人们使用 JavaScript 而不是 CSS 来支持浏览器。还有其他解决方案，例如使用 javascript。

source

css

#information{
    display:none;
}

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

fiddle

【讨论】：

【解决方案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/

【讨论】：