css高手请入啊 做个图片提示框用div搞的成吗
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css高手请入啊 做个图片提示框用div搞的成吗相关的知识，希望对你有一定的参考价值。
http://item.slide.com/r/1/181/i/CieW3U3y5T8x-qjrquGUrk3BNUKKdC6j/
就象百度这样的
代码copy后保存成*.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单鼠标事件提示效果</title>
<style>
body margin:0;
img border:0;
.imgbox width:80px; height:auto; margin:100px auto; background-color:#ccc; cursor:pointer;
.outbox position:absolute; width:100px; height:50px; font-size:12px; border:#ccc solid 1px; margin-top:-70px; margin-left:50px; background-color:#f1f1f1; display:none;
</style>
</head>
<body>
<div class="imgbox" onmouseover="document.getElementById('on').style.display='block'" onmouseout="document.getElementById('on').style.display='none'">
<img src="http://www.wowshili.com/bbs/customavatars/3.jpg" />
<div id="on" class="outbox">你的提示加这里面</div>
</div>
</body>
</html> 参考技术A 你可以做弹出层，不过这样的用弹出带遮罩的会好些.
如果需要的话，我可以传一个给你。 参考技术B 其实img这个标签本来就有个属性，就是提示框功能，<img src="pp.jpg" alt="提示框内容，例如图片的文字解析了" />
如果你真的想要一个div也可以,这个div你先在你的html页面写出来<div id="ppp" style="display:none">提示内容</div>
<img src="pp.jpg" onMouseOver=showDIV () onMouseOut=hiddenDIV() />
<script type="text/javascript">
function showDIV ()
document.getElementById('ppp').style.display="";
function hiddenDIV ()
document.getElementById('ppp').style.display="none";
</script>
以上是关于css高手请入啊 做个图片提示框用div搞的成吗的主要内容，如果未能解决你的问题，请参考以下文章
CSS中DIV块的margin外边距与overflow:hidden的关系问题，求高手赐教。