时间过渡和鼠标hover

来源：互联网发布：php 高德地图api 编辑：程序博客网时间：2024/06/07 14:01

今天为大家带来新的知识，补充新鲜的血液，对身体好。
首先，和大家说一说hover.hover是鼠标划过时触发的样式，可以运用在多个标签。首先使用最多的是a标签即锚点，语法：a:hover以下举个例子为大家讲解一下，代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            a{                font-size: 18px;            }            a:hover{                font-size: 25px;                color: cornflowerblue;            }        </style>    </head>    <body>        <a href="">鼠标划过我颜色改变，字体大小改变</a>    </body></html>

其次，时间过渡。时间过渡是什么意思呢？例如，想达到这样一个效果：当鼠标划过某个标签时，让另一个标签或该标签移到某个地方,如果使用hover,标签就会直接移到设置的位置，但我希望移动有个过程，不希望一蹴而就，那么，这时候，时间过渡就展现出了它的价值。时间过渡transition,语法：transition:标签名(但大多都使用的all,我个人比较中意all) 时间；transition:all 5s;
下面给大家举个例子：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            div.father{                width: 500px;                height: 500px;                margin: 0 auto;                border: 2px solid blue;            }            div.son{                width: 100px;                height: 100px;                background: skyblue;            }            div.father:hover div.son{                margin-left: 300px;                transition: all 5s;            }        </style>    </head>    <body>        <div class="father">            <div class="son"></div>        </div>    </body></html>

以上代码的意思是：当鼠标划过类名为father的div时，类名为son的div距离father左边框300px,5s的时间完成该动作。
今天的讲堂就到这里咯，大家可以回去自己尝试一下。等到我学习了新的知识再来和大家一起分享。

阅读全文

0 0