摘要:
下文讲述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. mybatis入门案例分析

    mybatis入门案例分析 一.设计模式分析 public class MybatisTest { public static void main(String[] args) throws Exce ...

  2. 线程安全之 synchronized 和 ReentrantLock

    线程安全之 synchronized 和 ReentrantLock + 面试题 前面我们介绍了很多关于多线程的内容,在多线程中有一个很重要的课题需要我们攻克,那就是线程安全问题.线程安全问题指的是在 ...

  3. vscode 调试 react 项目

    主要分为以下三个步骤 安装 debug for chrome 配置 launch.json 文件 配置内容如下 { "version": "0.2.0", &q ...

  4. Druid入门（1）—— 快速入门实时分析利器-Druid_0.17

    一.安装准备 本次安装的版本是截止2020.1.30最新的版本0.17.0 软件要求 需要Java 8(8u92 +)以上的版本,否则会有问题 Linux,Mac OS X或其他类似Unix的操作系统 ...

  5. 教你5分钟做个手机APP[视频]

    天天宅在家里,没什么事做,录个教学视频吧! 发到了视频网站上去根本没人看,伤心ing啊! 不知cnblogs上面是否让我发! 先上一张效果图看看哈: 如果播放不正常请点这里:https://www.b ...

  6. 动手学习Pytorch(4)--过拟合欠拟合及其解决方案

    过拟合.欠拟合及其解决方案 过拟合.欠拟合的概念 权重衰减 丢弃法   模型选择.过拟合和欠拟合 训练误差和泛化误差 在解释上述现象之前,我们需要区分训练误差(training error)和泛化误差 ...

  7. 小白的springboot之路（十五）、mybatis的PageHelper分页插件使用

    0.前言 用mybatis,那么分页必不可少,基本都是用PageHelper这个分页插件,好用方便: 1.实现 1.1.添加依赖: <!-- 3.集成 mybatis pagehelper--& ...

  8. 小白学 Python 数据分析（6）：Pandas （五）基础操作（2）数据选择

    人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...

  9. kali重置root密码

    像这样,kali系统的root密码忘记了,只需一分钟时间,快速重置root密码 第一步: 电脑开机后kali系统会进入引导界面,这是我们只需 “e” 进入启动前编辑命令(若系统没有出现这个页面,大家在 ...

  10. centos 7安装reids

    一.reids下载  下载地址: https://redis.io/ 二.解压安装 ① 解压:tar -zxvf redis-5.0.5.tar.gz ② 安装环境:yum install gcc-c ...