摘要:
下文讲述css中实现鼠标放在指定行上面时，整行变色的方法分享，如下所示:

实现思路:
使用:hover伪类，实现当鼠标指向时，其背景色发生相应的变化，如下例所示:
 
例：
下文中的div，当鼠标放上时，背景色发生相应的变化。

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.maomao365.com/" />

<title>猫猫教程(www.maomao365.com)</title>

<style type="text/css">

div{

  overflow:hidden;

  white-space:nowrap;

  height:30px;

  width:250px;

  background-color:white;

  color:black;

}

.divTest:hover{

  background-color:blue;

  color:white;

}

</style>

</head>

<body>

<div class="divTest">div 鼠标移上时,背景色发生变化</div>

</body>

</html>

相关阅读:
CSS3 伪类:hover选择器简介说明

CSS 如何实现当鼠标放在上面时整行变色呢？的更多相关文章

  1. CSS如何实现把鼠标放在行上整行变色

    CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面 ...

  2. GridView固定行宽,自动换行,鼠标放在Table的Tr上变色

    //固定行宽table-layout:fixed;//自动换行word-break :break-all;word-wrap:break-wordGridView.Attributes.Add(&qu ...

  3. 利用jQuery实现鼠标滑过整行变色

    在很多网站都有这样的效果,那就是当鼠标放在新闻列表一行上的时候,整行就会变色,虽然使用CSS也能够实现此种功能,但是由于众多浏览器版本对于CSS3并没有良好的支持,所以在当前情况下,使用jQuery实 ...

  4. 【转】使用Eclipse，将鼠标放在相应方法或字段等元素上时，无法显示提示

    使用Eclipse编写java代码时,将鼠标放在相应方法或字段等元素上时,会有对应的说明或提示. 不过,常出现下面的问题: Note:An exception occurred while getti ...

  5. Bootstrap3基础 disabled 多选框 鼠标放在方框与文字上都出现禁止 标识

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  7. 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果

    映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...

  8. CSS3实现鼠标经过图片时图片放大

    在鼠标经过图片时,图片被放大,而且还有个过渡的效果.... <!DOCTYPE html> <html> <head> <link href="cs ...

  9. Allegro中解决鼠标放在走线上网络名、走线长度显示不出来的问题

    一些PCB设计者在使用allegro时,由于一些误操作 导致当鼠标放在走线(cline)和网络(net)上面时,软件没有显示该走线的所属网络,或者相关的长度信息.本人经过help文档发现,以下方法可以 ...

随机推荐

  1. nodejs爬虫第一篇---> request、cheerio实现小爬虫

    目标 抓取猫眼正在热映的电影页面的数据,使用的第三方模块 request.cheerio. 说明 有时候我们需要做一些项目或者demo,我们需要一些数据,我们就可以利用爬虫,爬取一些我们想要的数据.个 ...

  2. MySql新版本安装配置

    版本:mysql-5.7.16-winx64 平台Windows 7 x64 1.进入mysql主目录(建议将其移到C或D盘的根目录,并改名为mysql) 2.配置path环境变量(如D:\JAVA\ ...

  3. The current test process

    样机测试 测试前: 工作内容: 1.需求分析.编写.评审: 项目开工会由项目负责人参加,参加会议时做好笔记,对项目的功能类似,功能模块,测试时间点有个大致的了解. 原始需求进行需求文档细化:按照模块进 ...

  4. 《Python学习手册 第五版》 -第10章 Python语句简介

    前面在开始讲解数据类型的时候,有说过Python的知识结构,在此重温一下 Python知识结构: 程序由模块组成 模块包含语句 语句包含表达式 表达式创建并处理对象 关于知识结构,前面已经说过我自己的 ...

  5. 拖延症？贪玩？来试试"百万金币时间管理法"

    中午吃完饭就想休息? 一到假期就起不来? 总是想玩游戏? 究其原因是因为我们没有深刻意识到时间的价值. 这点在大气爱智慧的视频:懂这个道理,保证让你快速自律起来!拯救拖延症,更好的戒掉不良习惯中有讲到 ...

  6. (原)NSQ源码阅读和分析(1)

    原文出处:https://www.cnblogs.com/lihaiping/p/12324371.html 本文记录自己在阅读和学习nsq源码的时候的一些学习笔记,主要目的是个人总结和方便后期查阅. ...

  7. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之一(三十七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  8. Invoking Descriptors - Python 描述符的用法建议

    描述符用法建议, 内置的 property 类创建的是'覆盖型'(date descriptor), 实现了 __set__ 和 __get__. 特性 property 的 __set__ 方法 默 ...

  9. MS SqlServer 的日期格式化函数 Convert

    MS SqlServer 的日期格式化函数:Convert(data_type[(length)], expression [, style])参数:data_type[(length)]代表转换的数 ...

  10. 基于MR实现ngram语言模型

    在大数据的今天,世界上任何一台单机都无法处理大数据,无论cpu的计算能力或者内存的容量.必须采用分布式来实现多台单机的资源整合,来进行任务的处理,包括离线的批处理和在线的实时处理. 鉴于上次开会讲了语 ...