鼠標提上去彈出提示層（定位）

希望的效果如圖：

網上找了各純css的做了下修改：

代碼如下：

 <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Strict//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <style> 
.logo1{
 ????width:150px; 
 ????height:60px; 
 ????float:left 
}
a.alt{
position:relative;
background-color:#fff;
float:left;
width:158px;
height:60px;
border:1px?solid?#ccc;
text-align:center;
text-decoration:none;
color:#333333;
}
a.alt:hover{background:#fff;?text-decoration:none;z-index:2;}
a.alt?div{display:none;}
a.alt:hover?div{
 ????display:block; 
 ????position:absolute; 
 ????top:-1px; 
 ????left:-300px; 
 ????width:300px; 
 ????height:300px; 
 ????border:2px?solid?#000; 
 ????z-index:1; 
 ????background-color:#fff; 
}
.brandAlertCen{
 ????border:1px?solid?#000; 
 ????width:300px; 
 ????height:300px; 
}
 </style> 
 <div?style="margin-left:500px;width:300px;height:auto"> 
 ????<div?class="logo1"><a?class='alt'?href="#"><div?class="brandAlertCen">專注于網頁特效及廣告代碼。<br?/><img?src="http://p0.jmstatic.com/pop_feature/12812/new_pre_pic.png"?width="280"?/></div><img?src="http://images.253.com/upload/brandImages/139865426888345.jpg"?/></a></div> 
 ????<div?class="logo1"><a?class='alt'?href="#"><div?class="brandAlertCen">專注于網頁特效及廣告代碼。<br?/><img?src="http://p0.jmstatic.com/pop_feature/12812/new_pre_pic.png"?width="280"?/></div><img?src="http://images.253.com/upload/brandImages/139865426888345.jpg"?/></a></div> 
 ????<div?class="logo1"><a?class='alt'?href="#"><div?class="brandAlertCen">專注于網頁特效及廣告代碼。<br?/><img?src="http://p0.jmstatic.com/pop_feature/12812/new_pre_pic.png"?width="280"?/></div><img?src="http://images.253.com/upload/brandImages/139865426888345.jpg"?/></a></div> 
 ????<div?class="logo1"><a?class='alt'?href="#"><div?class="brandAlertCen">專注于網頁特效及廣告代碼。</div><img?src="http://images.253.com/upload/brandImages/139865426888345.jpg"?/></a></div> 
 ????<div?class="logo1"><a?class='alt'?href="#"><div?class="brandAlertCen">專注于網頁特效及廣告代碼。</div><img?src="http://images.253.com/upload/brandImages/139865426888345.jpg"?/></a></div> 
 </div> 

demo下載地址：

http://down.51cto.com/data/1511860

? ?本文轉自許琴 51CTO博客，原文鏈接：http://blog.51cto.com/xuqin/1439301，如需轉載請自行聯系原作者

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/256719.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/256719.shtml
英文地址，請注明出處：http://en.pswp.cn/news/256719.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！