hover 滑入

最新推荐文章于 2024-03-19 10:15:00 发布
最新推荐文章于 2024-03-19 10:15:00 发布
阅读量70 收藏
点赞数
文章标签： servlet html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/korey__/article/details/126004349
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

            text-decoration: none;

        }

        .wrap {

            width: 642px;

            height: 240px;

            background-color: aqua;

            margin: 50px auto;

            padding: 15px 22px 22px 19px;

            box-sizing: border-box;

        }

        .a1 {

            line-height: 49px;

            font-size: 19px;

        }

        .a2 {

            font-size: 13px;

            text-align: center;

            margin-top: 8px;

        }



 

        .wrap .top .a3 p {

            font-size: 12px;

        }

        .wrap .top .a3 a {

            display: block;

            width: 48px;

            height: 18px;

            border: 1px solid white;

            font-size: 12px;

            text-align: center;

            line-height: 18px;

            border-radius: 3px;

            position: absolute;

            top: 45px;

            left: 0;

            bottom: 0;

            right: 0;

            margin: auto;

            color: white;

        }

        .wrap li .top {

            position: relative;

        }

        .a3 {

            width: 190px;

            height: 85px;

            position: absolute;

            background-color: #00c38e;

            display: none;

            text-align: center;

            padding: 6px 19px 10px 15px;

            line-height: 24px;

            box-sizing: border-box;

            color: white;

        }

        li {

            width: 190px;

            height: 150px;

            background-color: #f5f5f5;

            margin-right: 14px;

        }

        .wrap li:hover .a3 {

            display: block;

            top: 65px;

        }

        .wrap li {

            float: left;

        }

        .a4 {

            margin-right: 0;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <h4 class="a1">留学活动</h4>

        <ul>

            <li>

                <div class="top">

                    <img src="./images/图层465.jpg" alt="">

                    <!-- 透明 -->

                    <div class="a3">

                        <p>中科院，设计思维，两场高质量体验美国</p>

                        <a href="#">详细</a>

                        <div></div>

                    </div>

                </div>

                <div class="bot">

                    <p class="a2">中科院，设计思维，两场高质</p>

                </div>

            </li>

            <li>

                <div class="top">

                    <img src="./images/图层467.jpg" alt="">

                    <!-- 透明 -->

                    <div class="a3">

                        <p>中科院，设计思维，两场高质量体验美国</p>

                        <a href="#">详细</a>

                        <div></div>

                    </div>

                </div>

                <div class="bot">

                    <p class="a2">中科院，设计思维，两场高质</p>

                </div>

            </li>

            <li class="a4">

                <div class="top">

                    <img src="./images/图层468.jpg" alt="">

                    <!-- 透明 -->

                    <div class="a3">

                        <p>中科院，设计思维，两场高质量体验美国</p>

                        <a href="#">详细</a>

                        <div></div>

                    </div>

                </div>

                <div class="bot">

                    <p class="a2">中科院，设计思维，两场高质</p>

                </div>

            </li>

        </ul>

    </div>

</body>

</html>

岄.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原创 css:hover用法（5）滑动效果
jieweiwujie的博客
09-01 307
滑动效果
JS返回顶部代码
11-09
JS效果返回顶部代码，学习时写的，如有问题请留言。javascript返回顶部代码
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 748
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js练习总结
aohudai3633的博客
08-16 693
1.div返回顶部 当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。 实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。 要点一：document.documentElement.c...
JS返回顶部
才这么点的博客
05-14 120
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
返回顶部JS
weixin_33757609的博客
03-13 122
CSS #back-to-top{ position: fixed; bottom:20px; right: 20px; } JS var backBtn=$("#back-to-top"); function backToTop() { $("html,body").animate({ scrollTop: 0 ...
hover鼠标悬停导航滑动显示二级下拉菜单
06-04
// 滑回隐藏 }); }); ``` `data`目录可能包含用于动态生成菜单的数据，如JSON格式，这样可以方便地根据数据动态构建菜单。 总结来说，"hover鼠标悬停导航滑动显示二级下拉菜单"涉及HTML布局、CSS样式设计和...
jquery hover图片遮罩层滑动.zip
11-09
例如，当鼠标悬停时，这些内容可以从某个方向滑入，鼠标离开时则滑出。这可以通过调整CSS的`transform`属性实现，配合`animate()`函数或者CSS的`transition`属性完成动画效果。 综上所述，"jquery hover图片遮罩层...
jquery hover鼠标滑过动画导航条特效代码
03-20
例如，可以改变导航条中链接的颜色、大小、透明度等属性，或者添加滑入滑出的动画效果。 接下来，让我们深入探讨如何实现这个特效。在HTML结构中，我们需要创建一个导航条，通常由多个链接（`<a>`标签）组成，这些...
商城一级栏目滑入二级栏目效果.rar
08-07
"商城一级栏目滑入二级栏目效果"是一种常见的交互设计，旨在提供用户友好的导航体验。这种效果是利用JavaScript库jQuery实现的，它使得用户在鼠标悬停在一级分类时，能够平滑地展开相应的二级分类，进一步浏览和选择...
Jquery 实现弹出框（模态框）
12-10
Jquery实现模态框，包含对表的修改，删除，详情查看，增加等功能，代码简介，通俗易懂，对该代码原主人表示感谢！
利用js实现返回页面顶部
04-20
NULL 博文链接：https://ihenu.iteye.com/blog/1885565
jquery-Modal-Plug(jQuery模态框插件)
05-18
集成于jquery的一个模态框插件，在本插件中体现出了点击显示模态框，在一个模态框里面还有一个关闭按钮，如果有需求您可以使用第一个模态框，里面有多种加载方式仅供使用！
倒计时.html
09-20
倒计时简单制作，思路是利用思路：获取结束的时间-当前的时间>0，本资源好理解，便于学习
【JavaScript】---- 纯 js 实现返回页面顶部
最新发布
止于至善
03-19 1845
由于直接设置 scrollTop 为 0，因此执行过程不够平滑，直接返回顶部，体验不好！实现了平滑滚动到顶部；在滚动完成后执行回调函数。
jquery实现模态框
anmi8562的博客
07-12 1481
需求： 1、点击添加弹出模态框； 2、点击编辑弹出模态框，并有默认值； 3、点击删除，删除此行数据。 <!-- jquery模态框 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
webstorm（10.0.2）的端口号修改
热门推荐
止于至善
05-02 1万+
1.file ---&gt; settings 2.build --&gt; debugger --&gt; built-in server port:你需要的端口号 --&gt;apply --&gt; ok 端口号修改完成。 其他 [我的博客，欢迎交流！](http://rattenking.gitee.io/stone/index.html) [我的CSDN博客，欢迎交流！...
模态框--jquery
庸医2048的博客
02-26 2255
今天第一次写博客，希望自己写的简单易懂，好分享。为小伙伴们分享。
JS实现页面返回顶部
Handsome_fan的博客
07-15 8040
页面返回顶部是在Web中常见的效果，在一个很长的页面中，页面返回顶部按钮可以方便用户回到页面的顶部，增强用户体验。 这里我要实现的效果图如下： 其html代码如下： &amp;amp;lt;body style=&amp;quot;height: 1800px;&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;to-top&amp;quot;&amp;amp;gt;&
底部滑入divcss3
06-08
同样可以通过CSS3的transition属性和transform属性实现底部滑入的效果。以下是一个示例： ```css .container { position: relative; overflow: hidden; } .slide-in { position: absolute; bottom: 0; left: 0...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值