<!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. vcenter安装错误The DSN is pointing to anunspported ODBC driver...

    在安装vcenter server中采用现有独立sql server数据库时出现下列错误. 这是由于当前独立数据库版本和当前系统的客户端驱动不匹配.导致我们在odbc中配置dsn无法正常运行. 如sq ...

  2. 13种PDF转图片的案列

    Acrobat.dllc#PDFPDFRender4NET.dllpdf转图片 GitHub Clone Adress : https://github.com/stone0090/OfficeToo ...

  3. Visual Studio 2008 SP1键盘F10单步调试超慢解决方法

    症状: 中断程序调试时,F10或者其它键盘操作都超级慢. 鼠标点击工具栏的按钮速度正常. 解决方法: 网上说的什么删掉所有断点啦,关掉几个窗口啦,重置用户设置啦,关掉某某调试选项啦,关掉防火墙啦,都是 ...

  4. fillna()

    将下面注释掉 fillna() 函数:有一个inplace参数,默认为false,不会对原来dataframe中进行替换,为True时候会修改原来的.

  5. jQuery阻止默认行为

      <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF- ...

  6. Java_内存泄漏_实例1

    版权声明:本文为博主原创文章,转载请注明出处. 记一次压测时Java内存泄漏问题的发现过程(2017-08-14) [前篇] ①20170811进行A系统与B系统之间的会话功能进行压测,加上脚本准备期 ...

  7. c语言-汉诺塔递归调用

    #include<stdio.h> int main() { void hano_tower(int n,char one,char two,char three); int m=0; p ...

  8. MySql 的操作日志 历史记录

    如何查看mysql数据库操作记录日志 1.首先确认你日志是否启用了mysql>show variables like 'log_bin'. 2.如果启用了,即ON,那日志文件就在mysql的安装 ...

  9. 初识express

    初识Express 1.简介: express是基于Nodejs平台的快速,开放,极简的web开发框架 2.安装 npm install express --save 3.Hello world: c ...

  10. 洛谷 P4307 [JSOI2009]球队收益 / 球队预算（最小费用最大流）

    题面 luogu 题解 最小费用最大流 先假设剩下\(m\)场比赛,双方全输. 考虑\(i\)赢一局的贡献 \(C_i*(a_i+1)^2+D_i*(b_i-1)^2-C_i*a_i^2-D_i*b_ ...