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

在很多网站都有这样的效果，那就是当鼠标放在一个文章列表行的时候，此行就会显示与其他行不同的颜色，本站的文章列表也具有这样的效果，便于浏览者识别，非常人性化，下面就简单介绍一下如何实现此效果。代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.51texiao.cn/" />

<title>蚂蚁部落</title>

<style type="text/css">

a{text-decoration:none;}

li:hover{background-color:green;}

</style>

</head>

<body>

<ul>

  <li><a href="#">html</a></li>

  <li><a href="#">div+css</a></li>

  <li><a href="#">javascript</a></li>

  <li><a href="#">Jquery</a></li>

</ul>

</body>

</html>

以上代码通过使用E:hover伪类选择器实现了此效果。

但是此中方法有个缺点，就是IE6浏览器不支持除去a元素之外的E:hover伪类选择器。下面介绍一下能够兼容所有浏览器的方法，代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.51texiao.cn/" />

<title>蚂蚁部落</title>

<style type="text/css">

a{text-decoration:none;}

.over{background-color:green;}

.out{background-color:#FFF;}

</style>

</head>

<body>

<ul>

  <li onmouseover="this.className='over'" onmouseout="this.className='out'">

    <a href="#">html</a>

  </li>

  <li onmouseover="this.className='over'" onmouseout="this.className='out'">

    <a href="#">div+css</a>

  </li>

  <li onmouseover="this.className='over'" onmouseout="this.className='out'">

    <a href="#">javascript</a>

  </li>

  <li onmouseover="this.className='over'" onmouseout="this.className='out'">

    <a href="#">Jquery</a>

  </li>

</ul>

</body>

</html>

使用纯CSS实现在鼠标经过一个表格的某一行的时候，要整行的背景颜色发生变化，以表明该行正中焦点：
<html >
<head>
<meta charset="utf-8"/>
<title>change</title>
<style type="text/css">
  tr.change:hover
  {
     margin: 0px !important; padding: 0px 1em !important; outline: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; white-space: pre !important; background-image: none !important; background-attachment: initial !important; background-size: initial !important; background-origin: initial !important; background-clip: initial !important; background-position: initial !important; background-repeat: initial !important;">  }
</style>
</head>
<body>
<h1>鼠标经停变色</h1>
<table width="80%" border="1" align="center">
  <tr class="change">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="change">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

以上所述是小编给大家介绍的HTML中实现鼠标经停时整行（tr）变色，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

CSS如何实现把鼠标放在行上整行变色的更多相关文章

  1. CSS 如何实现当鼠标放在上面时整行变色呢？

    摘要:下文讲述css中实现鼠标放在指定行上面时,整行变色的方法分享,如下所示: 实现思路:使用:hover伪类,实现当鼠标指向时,其背景色发生相应的变化,如下例所示: 例: 下文中的div,当鼠标放上 ...

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

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

  3. CSS实现鼠标放图片上显示白色边框+文字描写叙述

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS基础(二)事件监听练习之table鼠标悬停行变色

    JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");   [object].r ...

  5. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  6. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  7. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  8. 模拟在table中移动鼠标，高亮显示鼠标所在行

    在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...

  9. JS实现 鼠标放上去 图片自动放大的效果

    前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...

随机推荐

  1. Python语言程序设计：Lab5

    Programming Create a Class Student which should have the following information:Parameters passed to ...

  2. 常见的linux上的服务重启脚本

    手写linux上的重启脚本,先把提纲列下 1.检查进程是否存在 存在杀死 2.备份原来的包到指定目录 3. 拉取新包,我这边为了简便,没有从jenkins slave上拿 4.启动命令 5.检查是否进 ...

  3. springboot集成rabbitmq并手动注册容器实现单个queue的ack模式

    原文:https://blog.csdn.net/qq_38439885/article/details/88982373 进入正题,本文会介绍两种实现rabbitmq的ack模式的方法,分别为: 一 ...

  4. python_面向对象——封装

    1.私有属性 class Person(object): def __init__(self,name,age): self.name = name self.age = age #实例属性 self ...

  5. Python Django 版本对应表

  6. 为什么Java那么火？

    承德SEO:常居编程语言榜首的 Java 已有 20 多年历史,它的实用性.性能和向后兼容性都无可替代,即使是忽略它的“年龄”也依然稳居第一 如今的 Java 几乎占据了C语言曾拥有的地位,而C语言在 ...

  7. 第五章 CSS美化网页元素

    一.span标签:能让某几个文字或者某个词语凸显出来 <p> 今天是11月份的<span>第一天</span>,地铁卡不打折了 </p> 二.字体风格 ...

  8. 线程（C++11）

    不同平台.框架.语言所使用的线程函数不同.对于初学者选择一种适合自己的,用熟用透即可. Windows中,CreateThread() Linux中,pthread_create() MFC框架中,A ...

  9. php常量和变量之变量引用

    变量引用 变量引用很多老师喜欢来用C语言的指针来去讲解.我们作为有这么多年开发和教学经验的人来说——大多数学习PHP的人来说根本不了解C语言. 使用C语言一指针来讲解变量引用,我们觉得画蛇填足.并且, ...

  10. spark读文件写mysql(java版)

    package org.langtong.sparkdemo; import com.fasterxml.jackson.databind.ObjectMapper; import org.apach ...