热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Javascript悬停效果删除预定义的样式-Javascripthovereffectremovespredefinedstyle

IamusingatutorialfromImarSpaanjaarswebsitetomakeanentiretablerowclickableandhave

I am using a tutorial from Imar Spaanjaars' web site to make an entire table row clickable and have a hover effect on it also. Once the user hovers over the table row it removes the pre defined background color for that row. I want to make it so that way it does not overwrite this style. How might I do that?

我正在使用来自Imar Spaanjaars网站的教程,使整个表格行可点击并对其产生悬停效果。一旦用户将鼠标悬停在表格行上,它就会删除该行的预定义背景颜色。我想这样做它不会覆盖这种风格。我怎么能这样做?

    

If you have any better suggestions to accomplish this task I would love to hear them!

如果您有更好的建议来完成这项任务,我很乐意听到它们!

My tr tag has a bgcolor tag in it that is set by my php if that specific piece of mail has been read or not.

我的tr标签中有一个bgcolor标签,如果已经读取了特定的邮件,则由我的php设置。

1 个解决方案

#1


If the original background color is specified via a stylesheet or (as in your case) a legacy bgcolor attribute, then you can just clear out the style on the element when you're done, and it'll revert:

如果原始背景颜色是通过样式表或(如你的情况下)传统的bgcolor属性指定的,那么你可以在完成时清除元素上的样式,它将还原:

function ChangeColor(tableRow, highLight)
{
  if (highLight)
  {
    tableRow.style.backgroundColor = '#dcfac9';
  }
  else
  {
    tableRow.style.backgroundColor = '';
  }
}

That said, you'd probably be better off using a CSS class and associated rules to represent the highlighted state of the row and add/remove that as you like:

也就是说,您可能最好使用CSS类和相关规则来表示行的突出显示状态,并根据需要添加/删除它:

tr { backgroundColor:  }
tr.highlighted { backgroundColor: #dcfac9 }

Then your Javascript becomes

然后你的Javascript就变成了

function ChangeColor(tableRow, highLight) {
    if(highLight) 
    {
        tableRow.className = 'highlighted';
    } 
    else 
    {
        tableRow.className = '';
    }
}

In addition to keeping specific styles out of your script and markup (where they become difficult to maintain over time), this lets you add or change hover styles (say, bold text, or a border) without adding complexity to the code.

除了将特定样式保留在脚本和标记之外(随着时间的推移它们变得难以维护),这使您可以添加或更改悬停样式(例如,粗体文本或边框),而不会增加代码的复杂性。

If you have access to a Javascript library such as Prototype, Ext.js or Dojo, then you can use their class manipulation functions instead, which will handle the case where you want to preserve an existing className, or are using multiple classes for on a single element.

如果您可以访问诸如Prototype,Ext.js或Dojo之类的Javascript库,那么您可以使用它们的类操作函数,它们将处理您希望保留现有className的情况,或者使用多个类来处理单个元素。


推荐阅读
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程,将每个考题分配给3个独立的专家,如果他们的评分不一致,则需要请一位裁判做出最终决定。文章详细描述了评分规则,并给出了解决该问题的程序。 ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • 本文介绍了一个Java猜拳小游戏的代码,通过使用Scanner类获取用户输入的拳的数字,并随机生成计算机的拳,然后判断胜负。该游戏可以选择剪刀、石头、布三种拳,通过比较两者的拳来决定胜负。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法,并给出了问题的解析和解决方法。详细介绍了问题的背景和规则,并给出了相应的算法解析和实现步骤。通过本文的解析,读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • 本文讨论了使用差分约束系统求解House Man跳跃问题的思路与方法。给定一组不同高度,要求从最低点跳跃到最高点,每次跳跃的距离不超过D,并且不能改变给定的顺序。通过建立差分约束系统,将问题转化为图的建立和查询距离的问题。文章详细介绍了建立约束条件的方法,并使用SPFA算法判环并输出结果。同时还讨论了建边方向和跳跃顺序的关系。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中,如Kubernetes、Hugo和Github CLI等。通过使用Cobra,我们可以快速创建命令行工具,适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • 本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • 在分页时,我想让点过的页码变色.应该怎么做?比如:12345我点2跳到第2页然后2变成红色其他为蓝色 ... [详细]
author-avatar
ZZDXP
学 無
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有