.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. Java 与 C++ 不一样的地方（持续更新中...）

    本文仅以记录 Java 与 C++ 不同之处,以备随时查询. Java 程序运行机制 Java 是一门编译解释型的语言,即它在运行的过程中既需要编译也需要解释.如下图表示的是 Java 程序运行机制: ...

  2. Android官方技术文档翻译——清单合并

    本文译自Android官方技术文档<Manifest Merger>,原文地址:http://tools.android.com/tech-docs/new-build-system/us ...

  3. SpartanBrowser产品和安全特性简介

    v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...

  4. Android虚拟机 USB转串口调试方法

    有时候需要在虚拟机调试串口,首先安装串口的驱动程序(不知道的话可以用驱动精灵),然后打开设备管理器找到驱动,查看驱动使用的端口(比如COM3),虚拟机需要在命令行启动: 将SDK下的tools文件夹加 ...

  5. mongodb系列之--分片的原理与配置

    1.分片的原理概述 分片就是把数据分成块,再把块存储到不同的服务器上,mongodb的分片是自动分片的,当用户发送读写数据请求的时候,先经过mongos这个路由层,mongos路由层去配置服务器请求分 ...

  6. 【52】java多线程剖析

    线程的状态: 线程共有下面4种状态: 新建状态(New): 新创建了一个线程对象,当你用new创建一个线程时,该线程尚未运行. 就绪状态(Runnable): 线程对象创建后,其他线程调用了该对象的s ...

  7. Spring 学习笔记---Bean的生命周期

    生命周期图解 由于Bean的生命周期经历的阶段比较多,我们将通过一个图形化的方式进行描述.下图描述了BeanFactory中Bean生命周期的完整过程: Bean 的生命周期从Spring容器着手实例 ...

  8. obj-c编程13:归档

    这篇归档内容的博文也挺有趣的,笨猫对好玩的东西一向感兴趣啊!如果用过ruby就会知道,obj-c里的归档类似于ruby中的序列化概念,不过从语法的简洁度来说,我只能又一次呵呵了. 下面大家将会看到2种 ...

  9. MOOS学习笔记4——独立线程不同回调

    MOOS学习笔记4--独立线程不同回调 /** * @fn 独立线程不同回调 * @version v1.0 * @author */ #include "MOOS/libMOOS/Comm ...

  10. Hibernate与Mybatis的比较

    Hibernate与Mybatis的比较: Hibernate: 标准的.重量级.全自动化的ORM框架 可以写sql(SQLQuery,sql )也可以不写sql(Query,hql) ORM映射主要 ...