CSS 如何实现当鼠标放在上面时整行变色呢？
摘要:
下文讲述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 如何实现当鼠标放在上面时整行变色呢？的更多相关文章
- CSS如何实现把鼠标放在行上整行变色
CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面 ...
- GridView固定行宽,自动换行,鼠标放在Table的Tr上变色
//固定行宽table-layout:fixed;//自动换行word-break :break-all;word-wrap:break-wordGridView.Attributes.Add(&qu ...
- 利用jQuery实现鼠标滑过整行变色
在很多网站都有这样的效果,那就是当鼠标放在新闻列表一行上的时候,整行就会变色,虽然使用CSS也能够实现此种功能,但是由于众多浏览器版本对于CSS3并没有良好的支持,所以在当前情况下,使用jQuery实 ...
- 【转】使用Eclipse，将鼠标放在相应方法或字段等元素上时，无法显示提示
使用Eclipse编写java代码时,将鼠标放在相应方法或字段等元素上时,会有对应的说明或提示. 不过,常出现下面的问题: Note:An exception occurred while getti ...
- Bootstrap3基础 disabled 多选框 鼠标放在方框与文字上都出现禁止 标识
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...
- 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果
映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...
- CSS3实现鼠标经过图片时图片放大
在鼠标经过图片时,图片被放大,而且还有个过渡的效果.... <!DOCTYPE html> <html> <head> <link href="cs ...
- Allegro中解决鼠标放在走线上网络名、走线长度显示不出来的问题
一些PCB设计者在使用allegro时,由于一些误操作 导致当鼠标放在走线(cline)和网络(net)上面时,软件没有显示该走线的所属网络,或者相关的长度信息.本人经过help文档发现,以下方法可以 ...
随机推荐
- 一步一步安装配置Ceph分布式存储集群
Ceph可以说是当今最流行的分布式存储系统了,本文记录一下安装和配置Ceph的详细步骤. 提前配置工作 从第一个集群节点开始的,然后逐渐加入其它的节点.对于Ceph,我们加入的第一个节点应该是Moni ...
- .net core3.1 web api中使用newtonsoft替换掉默认的json序列化组件
在微软的文档中,有着较为详细的替换教程 https://docs.microsoft.com/zh-cn/aspnet/core/web-api/advanced/formatting?view=as ...
- IntelliJ IDEA 2020 的Debug功能也太好用了，真香！
写在前边 作为一个有点强迫症的程序员来说,所有的应用软件.开发工具都必须要升级到最高版本,否则就会很难受到坐立不安.日思夜想.茶饭不思.至于什么时候得的这种病我也记不清了,哈哈哈 IntelliJ I ...
- 时序数据库 Apache-IoTDB 源码解析之系统架构（二）
上一章聊到时序数据是什么样,物联网行业中的时序数据的特点:存量数据大.新增数据多(采集频率高.设备量多).详情请见: 时序数据库 Apache-IoTDB 源码解析之前言(一) 打一波广告,欢迎大家访 ...
- 形象解释各种卷积算法（Convolution animations）
No padding, no strides Arbitrary padding, no strides Half padding, no strides Full padding, no strid ...
- 第3章 JDK并发包（四）
3.2.5 自定义线程创建:ThreadFactory 线程池的主要作用是为了线程复用,也就是避免了线程的频繁创建. ThreadFactory是一个接口,它只有一个方法,用来创建线程: Thread ...
- Jmeter——使用JSR223元件实现RSA登录加密
一.RSA加密简介 RSA加密是一种非对称加密.可以在不直接传递密钥的情况下,完成解密.这能够确保信息的安全性,避免了直接传递密钥所造成的被破解的风险.是由一对密钥来进行加解密的过程,分别称为公钥和私 ...
- 编写 Django 应用单元测试
作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 我们博客功能越来越来完善了,但这也带来了一个问题,我们不敢轻易地修改已有功能的代码了 ...
- WampServer 更换 mysql
下载另外版本的mysql,复制到 wamp/bin,初始化号 修改wamp 的/wampmanager.conf 复制相关配置文件 [mysqloptions] mysqlPortUsed = &qu ...
- 02_TypeScript数据类型
typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,写ts代码必须指定类型. 1.布尔类型(boolean) var flag:boolean = true; 2.数字 ...