源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 1948|回复: 0

[CSS/Html] css3实现鼠标移动到div时显示另外隐藏div效果的详细办法

[复制链接]

3089

主题

3485

帖子

12万

金币

超级版主

Rank: 8Rank: 8

积分
253858
发表于 2023-3-29 19:49:01 | 显示全部楼层 |阅读模式

本篇内容介绍了“css3实现鼠标移动到div时显示另外隐藏div效果的详细办法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

在CSS中,可以利用“:hover”选择器和opacity属性实现鼠标移动到div元素时,显示或隐藏div元素的效果,语法为“div:hover{opacity:0}”或者“div:hover{opacity:1}”。

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

css3怎样实现鼠标移动到div显示隐藏div效果

1、鼠标移动到div显示div

可以利用:hover选择器和opacity属性实现鼠标移动到div显示div效果,示例如下:
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.             div{
  7.                 width: 380px;
  8.                 height: 250px;
  9.                 background-image: url(1118.02.png);
  10.                 opacity: 0;
  11.             }
  12.             div:hover{
  13.                width: 380px;
  14.                 height: 250px;
  15.                 background-image: url(1118.02.png);
  16.                 opacity: 1;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <div>鼠标移动到div上</div>
  22.     </body>
  23. </html>
复制代码

2、鼠标移动到div隐藏div

还是可以利用:hover选择器和opacity属性实现鼠标移动到div显示div效果,示例如下:
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.             div{
  7.                 width: 380px;
  8.                 height: 250px;
  9.                 background-image: url(1118.02.png);
  10.             }
  11.             div:hover{
  12.                opacity: 0;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div>鼠标移动到div上</div>
  18.     </body>
  19. </html>
复制代码



您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-2-22 21:48 , Processed in 0.093750 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明