.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. Android Widget 开发详解(二) +支持listView滑动的widget

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/47027263 不少开发项目中都会有widget功能,别小瞧了它,他也是androi ...

  2. Python学习笔记 - 生成器generator

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- # generator 生成器 L = [x * x for x in range(10)] print( ...

  3. Android 自定义View -- 简约的折线图

    转载请注明出处:http://write.blog.csdn.net/postedit/50434634 接上篇 Android 圆形百分比(进度条) 自定义view 昨天分手了,不开心,来练练自定义 ...

  4. leetcode【67】-Bulb Switcher

    题目描述: There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off ...

  5. AngularJS进阶(二十二)实现时间选择插件

    JS实现时间选择插件 引导语 在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件.对于未接触的新事物,自己总是感觉不明觉厉.其实,有些实现可以使用很简单的方法即可.以此为例,偶 ...

  6. STL算法设计理念 - 预定义函数对象

    预定义函数对象基本概念:标准模板库STL提前定义了很多预定义函数对象 1)使用预定义函数对象: #include <iostream> #include <cstdio> #i ...

  7. OpenCV轮廓检测，计算物体旋转角度

    效果还是有点问题的,希望大家共同探讨一下 // FindRotation-angle.cpp : 定义控制台应用程序的入口点. // // findContours.cpp : 定义控制台应用程序的入 ...

  8. 【一天一道LeetCode】#8. String to Integer (atoi)

    一天一道LeetCode系列 (一)题目 Implement atoi to convert a string to an integer. Hint: Carefully consider all ...

  9. 修改Tomcat访问的端口号

    修改Tomcat端口号步骤: 1.找到Tomcat目录下的conf文件夹 2.进入conf文件夹里面找到server.xml文件 3.打开server.xml文件 4.在server.xml文件里面找 ...

  10. 安卓笔记-- ListView点击和长按监听

    其中点击监听为setOnItemClickListener() 具体实现代码如下 listView.setOnItemClickListener(new AdapterView.OnItemClick ...