摘要:
下文讲述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. vmware安装kvm虚拟机

    1. 概述 本篇博客主要使用运行在win10专业版上的vmware workstation 15 pro虚拟化软件,安装centos7.7最小化系统,并在centos7上安装kvm虚拟机,实现快速创建 ...

  2. 4、Oracle 数据库 startup 报错：ORA-27102: out of memory

    1.数据库启动报错: ORA-: out of memory SQL> startup pfile='/db/oracle/init.ora'; ORA-: out of memory Linu ...

  3. ConnectWeb

    @echo off MODE con: COLS=60 lines=20 color a taskkill /f /im knatsvc.exe taskkill /f /im DrMain.exe ...

  4. selenium 操作下拉处理

    操作下拉框处理 在网页中,有时候会遇到下拉框处理,这时候使用Webdriver提供的select类来处理. ##操作下拉框处理 #coding = utf-8 from selenium import ...

  5. Web框架之Gin介绍及使用

    Gin是一个用Go语言编写的web框架.它是一个类似于martini但拥有更好性能的API框架, 由于使用了httprouter,速度提高了近40倍. 如果你是性能和高效的追求者, 你会爱上Gin. ...

  6. Android Studio MainActivity中的R为红色

    csdn解决链接 https://blog.csdn.net/M283592338/article/details/79880413

  7. 对权值线段树剪枝的误解--以HDU6703为例

    引子 对hdu6703,首先将问题转化为"询问一个排列中大于等于k的值里,下标超过r的最小权值是多少" 我们采用官方题解中的做法:权值线段树+剪枝 对(a[i],i)建线段树,查询 ...

  8. 【WPF学习】第四十三章 路径和几何图形

    前面四章介绍了继承自Shape的类,包括Rectangle.Ellipse.Polygon以及Polyline.但还有一个继承自Shape的类尚未介绍,而且该类是到现在为止功能最强大的形状类,即Pat ...

  9. 一起了解 .Net Foundation 项目 No.1

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Akka.NET Akka ...

  10. 不同宿主的iterator不能进行比较

    int main() { string str1, str2; auto it1 = str1.begin(), it2 = str2.begin(); it1 == it2; ; }