<!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. word2010多级列表编号为什么会变成黑块

    把光标放置在黑块的后面 在键盘上按左方向键,则黑块变灰色(为选中状态) 然后ctrl+shift+s, 出现窗口“apply styles" 点击"reapply", 搞 ...

  2. SCVMM 安装

    1.所有的物理机必须在域环境下 2.安装VMM和SQL使用的域账号尽量相同,并且唯一,尽量与管理hyper v主机使用的账号不相同

  3. hihocoder1580 Matrix

    题目链接:(vjudge)戳我 从今天开始不咕咕地填坑啦 考虑一般的求最大子矩阵和...我们一般都是DP,或者直接上悬线法递推. 下面附一个DP的代码: #include<iostream> ...

  4. [NOI2010]能量采集（莫比乌斯反演）

    题面: bzoj luogu NOI2010能量采集 题解 读完题之后我们发现在每个产生贡献的点\((x1,y1)\)中,它与原点之间的点\((x2,y2)\)都满足\(x2|x1\),\(y2|y1 ...

  5. VSM Import Cluster功能验证一（准备篇）

    一.概述 本文档记录了VSM Import Cluster功能验证过程及过程中遇到的问题. 二.准备 2.1.网络规划 1) Management Network:VSM控制节点对其他节点的管理网络, ...

  6. vue和jQuery的区别

    从jquery到vue或者说是到mvvm的转变是一个思想的转变,是将原有的直接操作dom的思想转变到操作数据上去 vue和jquey对比 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取 ...

  7. Mysql 索引原理《一》索引原理与慢查询1

    为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句的优化显然 ...

  8. 在CMD中建立一个不能删除的文件

    Windows 下不能够以下面这些字样来命名文件/文件夹,包括:“aux”“com1”“com2”“prn”“con”和“nul”等,因为这些名字都属于设备名称,等价于一个 DOS 设备,如果我们把文 ...

  9. 微信小程序之tabbar切卡

    最近在研究小程序的时候,遇到了一个问题,就是tabbar切卡,在android上有fragment,在RN上也有提供一个第三方的组件来用,微信小程序,好像没有专门的一个组件来实现这个功能,度娘了大半天 ...

  10. sizeWithFont:的替代方法

    sizeWithFont:的替代方法 -(CGFloat)changeStationWidth:(NSString *)string{ UIFont * textFont = [UIFont syst ...