Move the mouse up to bring up the prompt layer (positioning)

Labels: CSS

Expected results

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/3E/3F/wKiom1PHK9_Qcy0SAAJiu2FPXAI655.jpg "Title =" 2014-07-17_094958.png "alt =" wkiom1phk9_qcy0saajiu2fpxai655.jpg "/>

I found various pure CSS files on the Internet and made the following changes:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/3E/40/wKiom1PHLBjSKDmmAAIAa_yAK_4285.jpg "Title =" 2014-07-17_095105.png "alt =" wkiom1phlbjskdmmaaiaa_yak_4285.jpg "/>

The Code is as follows:

<! 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}. alt {position: relative; Background-color: # FFF; float: Left; width: 158px; Height: 60px; Border: 1px solid # CCC; text-align: center; text-Decoration: none; color: #333333;}. ALT: hover {Background: # FFF; text-Decoration: none; Z-index: 2;}. 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 "> focuses on Webpage special effects and advertisement code. <Br/>  </div>  </a> </div> <div class = "logo1"> <a class = 'alt' href = "#"> <Div class = "brandalertcen"> focuses on Webpage effects and ad code. <Br/>  </div>  </a> </div> <div class = "logo1"> <a class = 'alt' href = "#"> <Div class = "brandalertcen"> focuses on Webpage effects and ad code. <Br/>  </div>  </a> </div> <div class = "logo1"> <a class = 'alt' href = "#"> <Div class = "brandalertcen"> focuses on Webpage effects and ad code. </Div>  </a> </div> <Div class = "logo1"> <a class = 'alt 'href = "# "> <Div class =" brandalertcen "> focuses on Webpage special effects and advertisement code. </Div>  </a> </div>

Demo:

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

This article is from the "phper Xu Qin-Focus on PHP Technology" blog, please be sure to keep this source http://xuqin.blog.51cto.com/5183168/1439301