.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. C++ Primer 有感（标准库类型）

    1.当进行string对象和字符串字面值混合连接操作时,+操作符的左右操作数必须至少有一个是string类型的: string s1= "hello"; sring s2=&quo ...

  2. 解决UIScrollView，UIImageView等控件不能响应touch事件的问题

    关于UIScrollView,UIImageView等控件不能响应touch事件,主要涉及到事件响应者链的问题,如果在UIScrollView,UIImageView等控件添加了子View,这样事件响 ...

  3. InfoQ访谈：Webkit和HTML5的现状和趋势

    原网址: http://www.infoq.com/cn/interviews/status-and-trends-of-webkit-and-html5 个人一些不成熟的见解,望讨论和指正. 节选 ...

  4. 【一天一道LeetCode】#40. Combination Sum II

    一天一道LeetCode系列 (一)题目 Given a collection of candidate numbers (C) and a target number (T), find all u ...

  5. Android For JNI(五)——C语言多级指针，结构体，联合体，枚举，自定义类型

    Android For JNI(五)--C语言多级指针,结构体,联合体,枚举,自定义类型 我们的C已经渐渐的步入正轨了,基础过去之后,就是我们的NDK和JNI实战了 一.多级指针 指针的概念我们在前面 ...

  6. PDA开发数据由DB下载至PDA本地

    public string DownFile = "\\下载.txt";//下载路径 public string LoadFile = "\\上传.txt";/ ...

  7. 关于iOS socket的讲解介绍

    socket(套接字)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元,包含进行网络通信必须的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议端口,远地主机的IP地址,远地进程 ...

  8. 用简单的C语言实现多任务轮流切换（模拟操作系统线程机制）

    最近在看linux内核的进程调度算法,也写了不少的内核注释,也参考了鸿哥的单片机框架,代码注释就开源在我的CSDN的git代码库里,有兴趣的可以去瞧瞧. 突发奇想,想到了既然单片机能够实现,那么我用标 ...

  9. ServletRequest

    /** * Defines an object to provide client request information to a servlet. The * servlet container ...

  10. ambari2.6.1汉化记录

    1.1测试机 Apache hadoop2.6Apache ambari 2.6.1集群规模:单节点操作系统 CentOS7以下所有操作均在root用户下执行 1.2安装环境 安装Maventar - ...