<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.2.1.js"></script>

    <style>

        .bg{

            background-color: #9b9b9b;

        }

        .tu{

            background-color: #2b99ff;

            border: 1px red dashed;

            width: 80px;

            height: 90px;

            float: left;

            position: relative;

        }

        .clearfix:after{

            content: "00";

            display: block;

            clear: both;

            visibility: hidden;

            height: 0;

        }

        .tubg{

            display: none;

            position: absolute;

            right: 0;

            left: 0;

            top:0;

            bottom: 0;

            color: black;

        }

        .tu:hover .tubg{

            background-color: #fbf6ff;

            display: block;

            opacity: 0.8;

            color: #f4323a;

            font-size: 15px;

        }

    </style>

</head>

<body>

   <div class="bg clearfix">

       <div>

            <div class="tu">

                <div class="tubg" >333</div>

            </div>

       </div>

       <div>

           <div class="tu">

               <div class="tubg" >333</div>

           </div>

       </div>

       <div>

           <div class="tu">

               <div class="tubg" >333</div>

           </div>

       </div>

   </div>

</body>

</html>

首先 我们做出了一个简单的画面,

鼠标移动到第一个格子的时候出现了

此时改变了背景还加入了字符串,这个整体实现是通过以下几个知识点:

1

css的伪类的使用: hover 是实现了鼠标移动到的改变,但是这里我们不是简单的改变背景颜色,

2

在显示元素后面加了一行标签,本来是应该直接显示的,但是我们给他的dsiplay设置了none ,将其隐藏起来.. hover后改变的是他的display=block

把此元素展示出来了.用这样的方法.

注:如果我们只是改变css的背景颜色 直接hover元素背景色就可以了     例如我们设置了一个标签将其css属性加上已下

:

但是如果我们要hover显示出来的背景是一个图片事件或者其他.就必须使用前面的复杂方法 先隐藏再显示.

巧用hover改变css样式和背景的更多相关文章

  1. jQuery基础 - 改变CSS样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  2. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧.     CSS()方法改变CSS样式 ...

  3. JQuery - 改变css样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  4. jQuery CSS()方法改变CSS样式实例解析

    转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ...

  5. 改变CSS样式

    改变CSS样式 1.改变HTML元素样式的语法 //改变HTML样式的语法 document.getElementById(id).style.property = new style 例子: < ...

  6. js改变css样式

      CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...

  7. 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件

    HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ...

  8. css样式之背景图片

    1.css样式背景之使用图片来做为背景 example: <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...

  9. Js 通过点击改变css样式

    通过js 点击按钮去改变目标原始的背景颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

随机推荐

  1. scvmm应答文件 无人值守安装系统

    我们可以通过这种windows配置文件实现winpe.光盘等无人职守安装配置操作系统,在scvmm虚拟化平台中这种文件叫做应答文件. 下面为一个windows server 2008 r2的一个完整应 ...

  2. sql server不用安装sql管理工具开启sa

    今天无意间发现腾讯云镜像有windows server2016,追求新系统的我,马上就重装了云服务器.重装完后发现,配置太低,远程桌面都变得不是很顺畅,于是装完sql server2016后便不打算另 ...

  3. MySQL分页查询存储过程

    -- 分页查询delimiter $create procedure p_List(in i_Name varchar(50),in i_CName varchar(20),in pageIndex ...

  4. Django_Restframwork_APIVIEW视图_源码分析

    Django _VIEW视图_源码分析

  5. [Swift]字符串大小写转换，同时实现本地化或设置语言环境

    在NSString中提供了3种字符串大小写转换方式:1. 转换字符串大小写2. 转换字符串大小写,并实现本地化3. 转换字符串大小写,并设置语言环境. 一. 转换字符串大小写如果只是想单纯的将字符串进 ...

  6. String，数组，list集合长度的使用

    public class Use{ public static void main(String[] args){ int[] arr=new int[]{19,10,20,30,23,13}; // ...

  7. POJ1475 Pushing Boxes（双搜索）

    POJ1475 Pushing Boxes  推箱子,#表示墙,B表示箱子的起点,T表示箱子的目标位置,S表示人的起点 本题没有 Special Judge,多解时,先最小化箱子被推动的次数,再最小化 ...

  8. urllib和urllib3

    urllib库 urllib 是一个用来处理网络请求的python标准库,它包含4个模块. urllib.request---请求模块,用于发起网络请求 urllib.parse---解析模块,用于解 ...

  9. 进阶篇：3.9）3d打印件设计

    本章目的:了解3d打印,购买3d打印机. 1.3d打印基础知识: 现在主流的3d打印技术有4种:①FDM:②SLA:③SLS:④3DP.具体如下: ①熔融沉积造型(Fused deposition m ...

  10. Windows下的特殊unicode输入

    相信很多运维人员见过这样的一种输入方法,按住键盘的ALT键然后在小键盘处输入88,放开ALT键,然后再按住ALT在小键盘处输入80,再放开键盘,屏幕光标文本处就会依次出现XP这个2个字母,这个很神奇, ...