HTML一种鼠标移动列变色效果

最新推荐文章于 2024-07-03 13:50:17 发布
最新推荐文章于 2024-07-03 13:50:17 发布
阅读量2k 收藏 1
点赞数
文章标签： html class float table input function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aicoder/article/details/5323593
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
*{font-size:12px; list-style:none; padding:0; margin:0}
.TmpMouseOver{padding:5px;border:1px solid #dddddd;border-top:1px solid #000000;float:left;width:780px; margin-top:-1px}
.MouseOut{padding:5px;border:1px solid #dddddd;float:left;width:780px; margin-top:-1px}
.CurMouseOver{padding:5px;background-color:#CCCCCC;border:1px solid #000000;float:left;width:780px; margin-top:-1px}

.TableListBox{clear:both;padding:0 15px}
.letter{width:756px;text-align:left;border-left:1px solid #CDCDCD;border-right:1px solid #CDCDCD}

.letter .Tmphd{height:32px;line-height:32px;border:1px solid #CDCDCD;border-top:1px solid #E60014;float:left;margin-top:-1px;width:780px;}
.letter .hd{height:32px;line-height:32px;border:1px solid #CDCDCD;float:left;margin-top:-1px;width:780px;}
.letter .Curhd{height:32px;line-height:32px;background-color:#fbbe63;border:1px solid #E60014;float:left;margin-top:-1px;width:780px;}

.letter .hd2{line-height:32px;border:1px solid #CDCDCD;float:left;height:32px;width:780px;}

.i6,.i4,.i3,.i5,.i7,.i8{float:left;height:32px;line-height:32px}
.i1{width:14px;float:left;padding-left:10px;padding-right:10px;margin-top:9px;line-height:0px}
.i2{width:14px;float:left;padding-left:10px;padding-right:10px;margin-top:7px;line-height:0px}
.i2 img{ height:16px;border:0 none;}
.i6{float:left;padding-right:10px}
.i7{float:left;padding-right:60px;padding-left:10px}
.i8{float:left;width:85px}
.i4{float:left;width:100px}
.i3{float:left;width:60px;padding-left:10px}
.i5{float:left}

.letter_table_title{float:left;width:475px;height:32px;line-height:32px;white-space:nowrap;overflow:hidden}
</style>
<script language="javascript">
function FMouseOver(curobj,nextid)
{
 if(nextid!=''){
  var o=document.getElementById(nextid);
  o.className='Tmphd';
 }
 curobj.className='Curhd';
}
function FMouseOut(curobj,nextid)
{
 if(nextid!=''){
  var o=document.getElementById(nextid);
  o.className='hd';
 }
 curobj.className='hd';
}
</script>
</head>

<body>
<div class="TableListBox">
<div class="letter">
    <div class="hd2">
     <ul>
      <li class="i1"><input name="checkbox_inbox" type="checkbox" value="" checked="checked" /></li>
      <li class="i6"><strong>全选</strong></li>
      <li class="letter_table_title"><strong>标题</strong> </li>
      <li class="i7"> <strong>发信人</strong>  </li>
      <li class="i5"> <strong>发送时间</strong> </li>
     </ul>
     
     </div>
    <div class="hd" id="lst1" οnmοusemοve="FMouseOver(this,'lst2');" οnmοuseοut="FMouseOut(this,'lst2');">
     <ul>
      <li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
      <li class="i2"><img src="images/front/img/icon_11.gif" /></li>
      <li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
      <li class="red i8">中演出票务通</li>
      <li class="i5">2009-5-30&nbsp;&nbsp;19:30:30</li>
     </ul>
    </div>
     <div class="hd" id="lst2" οnmοusemοve="FMouseOver(this,'lst3');" οnmοuseοut="FMouseOut(this,'lst3');">
     <ul>
      <li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
      <li class="i2"><img src="images/front/img/icon_11.gif" /></li>
      <li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
      <li class="red i8">中演出票务通</li>
      <li class="i5">2009-5-30&nbsp;&nbsp;19:30:30</li>
     </ul>
    </div>
     <div class="hd" id="lst3" οnmοusemοve="FMouseOver(this,'lst4');" οnmοuseοut="FMouseOut(this,'lst4');">
     <ul>
      <li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
      <li class="i2"><img src="images/front/img/icon_11.gif" /></li>
      <li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
      <li class="red i8">中演出票务通</li>
      <li class="i5">2009-5-30&nbsp;&nbsp;19:30:30</li>
     </ul>
    </div>
     <div class="hd" id="lst4" οnmοusemοve="FMouseOver(this,'lst5');" οnmοuseοut="FMouseOut(this,'lst5');">
     <ul>
      <li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
      <li class="i2"><img src="images/front/img/icon_11.gif" /></li>
      <li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
      <li class="red i8">中演出票务通</li>
      <li class="i5">2009-5-30&nbsp;&nbsp;19:30:30</li>
     </ul>
    </div>
     <div class="hd" id="lst5" οnmοusemοve="FMouseOver(this,'lst6');" οnmοuseοut="FMouseOut(this,'lst6');">
     <ul>
      <li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
      <li class="i2"><img src="images/front/img/icon_11.gif" /></li>
      <li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
      <li class="red i8">中演出票务通</li>
      <li class="i5">2009-5-30&nbsp;&nbsp;19:30:30</li>
     </ul>
    </div>
     <div class="hd" id="lst6" οnmοusemοve="FMouseOver(this,'lst7');" οnmοuseοut="FMouseOut(this,'lst7');">
     <ul>
      <li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
      <li class="i2"><img src="images/front/img/icon_11.gif" /></li>
      <li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
      <li class="red i8">中演出票务通</li>
      <li class="i5">2009-5-30&nbsp;&nbsp;19:30:30</li>
     </ul>
    </div>
     <div class="hd" id="lst7" οnmοusemοve="FMouseOver(this,'');" οnmοuseοut="FMouseOut(this,'');">
     <ul>
      <li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
      <li class="i2"><img src="images/front/img/icon_11.gif" /></li>
      <li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
      <li class="red i8">中演出票务通</li>
      <li class="i5">2009-5-30&nbsp;&nbsp;19:30:30</li>
     </ul>
    </div>
</div>
</div>
</body>
</html>

aicoder
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 表格table点一下变色_HTML中实现鼠标移动到table中某个单元格中颜色改变
weixin_40001395的博客
11-29 1504
在html中，我们经常会用到table布局；有时候需要实现指定单元格，当鼠标移动到上面的时候，该单元格背景变色，不是该行背景变色，也不是仅仅文字的背景变色；html的文件结构大家都是知道的了，总体分为head和body部分我们要实现变色，在head部分实现格式.tablex {border-collapse: collapse;}.tablex tr {}.tablex tr td {text-a...
【HTML】—鼠标移入或移出表格，表格变色
热门推荐
王萌萌
11-18 1万+
本文积累了几种鼠标移入或者移出html的table表格时，表格背景色变化的几种方法。 一、利用样式CSS表达式 在样式里写表达式expression，实现鼠标经过表格行上变色，但在firefox里无效果。 完整代码如下： 在样式里写表达式expression，实现鼠标经过表格行上变色 .tbDatalist {
HTML表格鼠标滑过变色 和奇数偶数行变色+点击变色
kybkq1314的博客
11-09 3372
无标题文档     题意：     创建一个表格，实现各行换色功能：     光标在表格上移动，当前行变色；离开当前行，颜色恢复；点击按钮，鼠标左键按下，颜色改变，抬起，颜色恢复 -->             .body_div{ width:366px;             height:388px;
html--鼠标跟随特效
stqer的博客
04-26 1246
【代码】html--鼠标跟随特效。
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行
09-04
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行
HTML表格中鼠标停留与鼠标移出事件颜色自动改变的实现
Heulizeyang's Blog
07-06 1563
其实这个功能实现起来很简单，看个简单的例子吧。 EX: 例子 例子 例子 例子 这样当鼠标移动到表格中的第一行，颜色就会改变，移
css实现随鼠标移动div渐变色效果
09-25
在这个案例中，我们讨论的是如何利用CSS实现随鼠标移动的div渐变色效果。这个效果通过多组嵌套的div元素和hover伪类来实现，给人一种视觉上的层次感和动态变化。 首先，我们来看HTML部分。HTML代码中包含了一系列带...
PB数据窗口鼠标移动字体变色
11-18
在PowerBuilder（PB）开发环境中，数据窗口（DataWindow）是一种强大的组件，用于显示和操作数据库中的数据。在“PB数据窗口鼠标移动字体变色”这个主题中，我们关注的是如何实现在用户鼠标移动到数据窗口某一行时，...
html5跟随鼠标移动银河星系背景动画特效
09-08
在这个“html5跟随鼠标移动银河星系背景动画特效”中，我们可以看到HTML5的强大潜力被充分利用，创造出一种引人入胜的视觉体验。这个特效将用户交互与动态图形相结合，使得背景中的银河星系随着鼠标的移动而变化，...
css控制div鼠标放上去变色
09-25
当用户将鼠标移动到这些div上时，背景颜色的变化将立即生效，提供了一种直观的反馈。 总之，通过CSS的选择器和伪类，我们可以轻松地实现div元素在鼠标悬停时背景颜色变化的效果。这种方法不仅适用于简单的背景颜色...
js实现表格变色（鼠标移动 选中变色）
08-13
在JavaScript编程中，实现表格元素（如HTML的`<table>`）动态变色的效果是一种常见的交互设计，可以增强用户体验。本教程将详细讲解如何通过JavaScript实现表格行在鼠标移动、选中复选框时的变色效果。 首先，我们...
如何实现鼠标移入变色，移出还原
09-25
该代码可以实现表格中鼠标在不同行间移动来实现输鼠标移入移出 有颜色提醒的效果
div+CSs表单鼠标移动变色
05-14
div+js表单鼠标移上去变色,让你的表单更具有魅力，更具有动感
a标签鼠标放上去变色_芯烨标签打印机驱动安装
weixin_39672572的博客
11-06 498
公众号内回复芯烨标签驱动获取驱动下载链接1、解压驱动并运行安装程序，选择安装路径点下一步，完成。2、选择对应端口后选对应型号一直下一步3、安装完成，调试打印机点左下角开始，设备和打印机，选对应驱动点右键-打印首选项，在此新建对应标签纸的大小。在此分为两方面：a>打印机为热敏打印机(无碳带)：在此已经安装完成，关掉打印机，再打开打印机，打印机会自动识别标签纸大小，按FEED按键，如果...
html table标签鼠标移进移出背景变色
lighteninglin的博客
10-12 3143
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; new document &lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gbk"/&gt; &lt;scrip
a标签鼠标放上去变色_标签打印软件如何批量制作外箱标签
weixin_39575565的博客
11-06 200
外箱条码标签批量制作时，由于箱内货品不同，标签上的条形码一般也是变化的，这样方便我们针对箱内货品进行管理。外箱条码标签的批量制作，在专业条码软件中琅条码标签打印软件里操作非常简单。下面我们来详细看一下具体操作步骤：在制作外箱标签之前首先需要我们将标签内容保存在Excel中，做成一列是一项内容，一行是一个标签内容的效果，全部是普通文本格式没有任何合并单元格、加粗、筛选等格式。标签内容保存好之后，就...
鼠标悬浮到a标签上的文字变颜色，怎么加大悬浮范围
最新发布
m0_67841039的博客
07-03 286
请注意，增大响应区域可能会影响用户体验，因此需要谨慎使用。确保增加的区域不会覆盖其他元素或造成布局问题。如果CSS无法满足需求，你也可以使用JavaScript来监听鼠标事件，并在鼠标进入或离开时改变样式。这样，即使鼠标移动到文字之外的填充区域，也会触发。如果你想要增大鼠标可以悬浮的区域，可以给。标签上时改变文字颜色，通常使用CSS的。另一种方法是使用CSS的。
鼠标移入字体变色
shi_jia233的博客
10-18 1万+
1打开DW，CTRL+n新建一个html 2在html的body里打上ul再打上li和a标签 3在title里给li设置字体大小，背景宽高，外右边距，背景颜色和居中。 给a标签设置颜色和去下划线 还有鼠标移入a标签后的字体颜色和字体大小 4下午茶是移入后的效果其他的是未移入的效果，也可以设置背景颜色的变化 5以下的代码把a标签给减去了，然后给li加上鼠标移入后的背景颜色和字体颜色 6下午茶是移入后的效果其他的是未移入的效果 ...
html移入移除变色,html中如何实现表格移入移出时背景颜色改变？（两种方法）...
weixin_39534395的博客
06-18 1219
html中如何实现表格移入移出时背景颜色改变？(两种方法)一、总结1、通过css的table标签的hover属性：10 #tab:hover{11 background: green12 }2、通过js的onmouseover(),onmouseout()事件：16 51 function change(c){52 ...
html当鼠标移动到按钮变色
06-12
你可以通过CSS中的:hover伪类来实现当鼠标移动到按钮时改变按钮的样式，具体的实现方法如下： 1. 首先在HTML中定义一个按钮元素，比如一个<button>标签。 2. 在CSS中给该按钮元素定义默认的样式，比如背景颜色为灰色。 3. 使用:hover伪类来定义鼠标悬浮在按钮上时的样式，比如将背景颜色改为蓝色。 下面是一个示例代码： HTML: ``` <button>点击我</button> ``` CSS: ``` button { background-color: gray; color: white; padding: 10px 20px; border: none; } button:hover { background-color: blue; } ``` 这样当鼠标移动到按钮上时，按钮的背景颜色就会从灰色变为蓝色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值