打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
CSS轻易实现鼠标移上Hover时的显示隐藏效果
为你的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>
</body>
</html>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
纯CSS简洁TAB滑动门切换代码
第四天 纵向导航菜单及二级弹出菜单—DIV+CSS教程—十天学会web标准
div + css案例
css:hover状态改变另一个元素样式的使用
CSS实例:翻转图片、滚动图片栏、打开大门
抄一个 CSS+DIV菜单
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服