为你的Div方块添加鼠标效果,当鼠标移上的时候,与显示一个提示信息,当移走的时候,这个提示信息又重新隐藏起来,这种效果用CSS就可实现了,而且在各大浏览下表现还是不错的,欢迎参考代码,新手们一定不要错过哦。
代码正文1:<html>
<head>
<title>蓝色理想</title>
<style type="text/css">
a.popup{position:relative;}
a.popup div{
display:none;
position:absolute;
top:40px;
left:200px;
z-index: 99;
border: 1px solid;
padding:4px;
width:100px;
}
a.popup:hover div{display:block;}
div{
background-color:#F1867C;
color:black;
width:140px;
height:40px;
}
</style>
</head>
<body>
<a href="#" class="popup" style="color:red" >a标签标题
<div>悬浮窗文字</div>
</a>
</body>
</html>
代码正文2:
<html>
<head>
<title>蓝色理想</title>
<style>
.wrap{}
.wrap .box{
border:2px solid red;
width:200px;height:200px;
float:left;
margin-right: 10px;
margin-bottom: 10px;
}
.wrap .box:hover h1{display:block;}
.wrap .box h1{
background:#333;
color:white;
display:none;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<h1>明天还爱我</h1>
</div>
</div>
</body>
</html>
代码正文3:
<html>
<head>
<title>蓝色理想</title>
<style>
.tanchucaidan{ display:none;} /*设置弹出菜单默认隐藏*/
.dingjicaidan li:hover ul{ display:block;}
/*当鼠标移动到dingjicaidan下的li标签时,改变li下的ul标签的display属性(显示出来)*/
</style>
<body>
<ul class="dingjicaidan">
<li>
<a href="#">
菜单
</a>
<ul class="tanchucaidan">
<li>
弹出菜单1
</li>
</ul>
</li>
</ul>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。