.font em:hover { font-size: 2em }
.font strong:hover { font-weight: normal }
.font span:hover { color: blue }
.transform * { }
.transform em:hover { }
.transform span:hover { }
.background { width: 200px; height: 50px }
.background:hover { background: yellowgreen }
.border { width: 200px; height: 50px; border: 2px solid transparent }
.border:hover { border: 2px solid black }

　　对文字hover展现出特殊效果，可以采用调整元素css属性来完成，虽然只能实现一些简单的动作，精心组合之下却能够达到令人满意的结果。

　　1、字体变化：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
            em:hover{  font-size: 2em;  }
            strong:hover{  font-weight: normal;  }
            span:hover{   color: blue; }
        </style>
    </head>
    <body>
        <em>悬浮变大</em><br>
        <strong>悬浮变细</strong><br>
        <span>悬浮变颜色</span>
    </body>
</html>

　　结果如下：

悬浮变大

悬浮变细

悬浮变颜色

　　2、缩放和旋转：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            em:hover{ display: inline-block; transform: scale(2);  }
            span:hover{ display: inline-block; transform: rotate(360deg);  transition: 1s; }
        </style>
    </head>
    <body>
        <span>悬浮这里旋转</span>
        <em>悬浮这里放大</em>
    </body>
</html>

　　结果如下：

　　　　页面中无法显示，待查找原因。

　　3、改变背景和边框：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .background{  width: 200px; height: 50px;  }
            .background:hover{  background: yellowgreen; }
            .border{  width: 200px; height: 50px; border: 2px solid transparent;  }
            .border:hover{  border: 2px solid black;}
        </style>
    </head>
    <body>
    <p class="background">
        悬浮这里出现背景色
    </p>
    <p class="border">
        悬浮这里出现边框
    </p>
    </body>
</html>

　　结果如下：

悬浮这里出现背景色

悬浮这里出现边框

　　为不影响边框显示后位置的变化，所以先将边框设置为透明色，如果想要实现动态的效果，可以在不悬浮时不设边框，这样悬浮时文字就会有一个动态的过程。

　　除此之外，想要实现hover更加丰富的功能，要灵活应用属性设置，并且结合功能进行设置，比如对于链接的文本采用hover反色，改变字体亮度等带给人聚焦点亮的效果；对于关闭功能，设置等这些功能性按钮图标，可以采用hover更换背景图片，或者旋转、放大来引起人们的注意，并为简洁的页面增加活泼的效果。

利用css实现hover动态效果的更多相关文章

  1. HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...

  2. 利用CSS制作脸书

    很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...

  3. 利用CSS制作背景变色的横向导航栏

    1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...

  4. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  5. 循序渐进BootstrapVue，开发公司门户网站（2）--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果

    在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...

  6. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  7. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  8. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  9. 利用css新属性appearance优化select下拉框

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. 【一天一道LeetCode】#55. Jump Game

    一天一道LeetCode系列 (一)题目 Given an array of non-negative integers, you are initially positioned at the fi ...

  2. Ext.Net 1.x_Ext.Net.GridPanel嵌套Checkbox

    解决办法:拼接HTML var tplchecked = '<input type="checkbox" {0}>'; var IsChecked = function ...

  3. 实例分析exec函数

    fork()函数通过系统调用创建一个与原来进程(父进程)几乎完全相同的进程(子进程是父进程的副本,它将获得父进程数据空间.堆.栈等资源的副本.注意,子进程持有的是上述存储空间的"副本&quo ...

  4. (NO.00001)iOS游戏SpeedBoy Lite成形记(二)

    打开SpriteBuilder生成的Xcode项目文件,首先在MainScene添加play回调函数: -(void)play{ CCScene *gameScene = [CCBReader loa ...

  5. Ubuntu15.04 + Matlab2014a + MatConvNet install and compile

    MatConvNet is a MATLAB toolbox implementingConvolutional NeuralNetworks (CNNs) for computer vision a ...

  6. Android4.0Sd卡移植之使用vold自动挂载sd卡

    在cap631平台上移植android4.0,发现内核驱动没有任何问题,能够读写,当总不能挂载. 后来发现是因为自动挂载需要vold的支持.vold程序负责检查内核的 sysfs 文件系统,发现有SD ...

  7. php 运行linux命令 与 linux下命令行执行php

    1.php运行linux命令 exec函数:string exec(string command, string [array], int [return_var]);  执行函数后不输出结果,返回最 ...

  8. 在FFMPEG中使用libRTMP的经验

    FFMPEG在编译的时候可以选择支持RTMP的类库libRTMP.这样ffmpeg就可以支持rtmp://, rtmpt://, rtmpe://, rtmpte://,以及 rtmps://协议了. ...

  9. Linux文件内容查阅 - cat, tac, nl, more, less, head, tail, od

    cat 由第一行开始显示文件内容 tac 从最后一行开始显示,可以看出 tac 是 cat 的倒著写! nl 显示的时候,顺道输出行号! more 一页一页的显示文件内容 less 与 more 类似 ...

  10. mysql随笔

    MySQL查询优化器--非SPJ的优化 MySQL查询优化器--非SPJ优化(一)--GROUPBY优化 http://blog.163.com/li_hx/blog/static/183991413 ...