css高手请入啊 做个图片提示框用div搞的成吗
http://item.slide.com/r/1/181/i/CieW3U3y5T8x-qjrquGUrk3BNUKKdC6j/就象百度这样的...
http://item.slide.com/r/1/181/i/CieW3U3y5T8x-qjrquGUrk3BNUKKdC6j/
就象百度这样的 展开
就象百度这样的 展开
3个回答
展开全部
可以实现,给你个简单的办法:
代码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>
代码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>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以做弹出层，不过这样的用弹出带遮罩的会好些.
如果需要的话，我可以传一个给你。
如果需要的话，我可以传一个给你。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
其实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>
如果你真的想要一个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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
