Css悬停文本信息 [英] Css hover text information
本文介绍了Css悬停文本信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在做网站，而且我遇到了问题。我有一个
< h1> 及其旁边的图片，该图片是一个问号。我希望当我将鼠标悬停在问号上时，它显示出我用这些信息做出的div ...我在该论坛中看到很多主题，但他们都没有工作，请帮助我！ < html>
< body>
< h1>分支< img id =helpsrc =Questionmark.png>< / img>< / h1>
< div id =information>分支是......< / 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，但也没有工作...
解决方案
如果您想要简单的工具提示类型的东西，那么您可以使用此代码
< h1>
分支< img id =helpsrc =Questionmark.png>< / img>
< div id =information>分支是......< / div>
< / h1>
h1 {
position：relative;
}
h1 img {
cursor：pointer;
}
#information {
display：none;
位置：绝对;
left：50px;
width：100px;
height：50px;
font-size：14px;
背景：红色;
}
h1 img：hover + #information {
display：block;
}
检查此链接 http://jsfiddle.net/amoljawale/G83WB/2/
I need some help!
I'm doing website, and i'm having a problem with a thing. I have a <h1> and a image next to it, that image is a question mark. And i want that when i mouse hover that question mark it appears the div that i made with the information... i saw lots of topics answered in that forum but none of them is working, pls help me!
<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>
Pls tell me what to do, maybe there is a easy way... i tried css but also didn't work...
解决方案
If you want simple tooltip kind of thing, then you can use this code
<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;
}
Check this link http://jsfiddle.net/amoljawale/G83WB/2/
这篇关于Css悬停文本信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
