This article describes the CSS implementation of the mouse hover when the slide out of the layer hint method. Share to everyone for your reference. The specific analysis is as follows:
This is a simple mouse hover hint effect, similar to the ALT tag, but this one is implemented with a pure CSS, scalability, and in the hint layer can be added to the picture or other layout, this depends on your needs.
The
code is as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/>
<TITLE>CSS Implementation layer hint </title>
<style>
div{
Clear:both;
margin:5px 0 0 0;
font-size:12px;
line-height:22px;
}
a.alt{
position:relative;
Background-color: #fff;
Float:left;
width:158px;height:20px;
margin:0 Auto;
border:1px solid #eee;
Text-align:center;
Text-decoration:none;
color: #0066cc;
}
a.alt:hover{
background: #fff;
Text-decoration:none;z-index:2;
}
A.alt span{
Display:none;
}
A.alt:hover span{
Position:absolute;
Display:block;
top:-1px;left:158px;
width:130px;height:60px;
border:1px solid #eee;
z-index:1;
}
</style>
</head>
<body>
<div>
<a class= ' alt ' href= '/' ><span> a high quality scripting site </span> scripting home </a>
</div>
<div>
<a class= ' alt ' href= '/' ><span> give you practical CSS code </span> web effects Library </a>
</div>
</body>
</html>
I hope this article will help you with the DIV+CSS web design.