.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. map.js的编写（js编写一个对象的方式）

    // 定义map function Map() { this.container = {}; } // 将key-value放入map中 Map.prototype.put = function(ke ...

  2. 14_Android中Service的使用,关于广播接收者的说明

     服务:长期后台运行的没有界面的组件 android应用:什么地方需要用到服务? 天气预报:后台的连接服务器的逻辑,每隔一段时间获取最新的天气信息 股票显示:后台的连接服务器的逻辑,每隔一段时间获 ...

  3. RAC 10g administration

    10g RAC administration See OCFS Oracle Cluster Filesystem, ASM, TNSnames configuration, Oracle Datab ...

  4. R.java文件介绍

    HelloWorld工程中的R.java文件 package com.android.hellworld; public final class R {     public static final ...

  5. kettle简介（整体架构，运行方式，使用方法）

    项目负责人Matt的说法:把各种数据放到一个壶里,然后呢,以一种你希望的格式流出.呵呵,外国人都很有联想力.看了提供的文档,然后对发布程序的简单试用后,可以很清楚得看到Kettle的四大块: Chef ...

  6. unity连接photon服务端模块

    using UnityEngine; using System.Collections; using System; public class PhotonConnection : Photon.Mo ...

  7. 安卓TV开发（六） 移动智能终端UI之实现类似GridView的焦点控制FocusView框架

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/40045089,作者:skay 前言 安卓TV开发(五) 移动智能终端UI之实现主流 ...

  8. OpenCV——PS 图层混合算法 （三）

    具体的算法原理可以参考 PS图层混合算法之三(滤色, 叠加, 柔光, 强光) // PS_Algorithm.h #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ ...

  9. Spring 学习笔记 ----依赖注入

    依赖注入 有三种方式,本文只学习下属性注入. 属性注入       属性注入即通过 setXxx方法()注入Bean的属性值或依赖对象,由于属性注入方式具有可选择性和灵活性高的优点,因此属性注入方式是 ...

  10. 恶补web之一:html学习(2)

    iframe用于在网页内显示网页:<iframe src="URL"></iframe>,iframe可用作链接的目标: <!DOCTYPE html ...