Change :hover CSS properties with JavaScript
I need to find a way to change CSS :hover properties using JavaScript.
For example, suppose I have this HTML code:
<table>
<tr>
<td>Hover 1</td>
<td>Hover 2</td>
</tr>
</table>
And the following CSS code:
table td:hover {
background:#ff0000;
}
I would like to use JavaScript to change the <td> hover properties to, say, background:#00ff00. know I could access the style background property using JavaScript as:
document.getElementsByTagName("td").style.background="#00ff00";
But I don't know of a JavaScript equivalent for :hover. How do I change these <td>'s :hover background using JavaScript?
|
Pseudo classes (like |
var css = 'table td:hover{ padding: 0px; border: 0px; color: rgb(48, 51, 54);">;
style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
Change :hover CSS properties with JavaScript的更多相关文章
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- Hover.css:一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
- 谷歌浏览器 查看源码里的a:hover CSS样式 还有火狐的查看方式
谷歌浏览器查看hover css样式 直接实例: 选中a标签 然后右侧面板 出现 箭头 点击 出现Toggle Element state提示 下面再hover前打勾 直接就可以显示效果了 浏览器查看 ...
- Webkit CSS properties
Webkit CSS properties -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit- ...
- 让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解
做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscrol ...
- CSS3悬停特效合集Hover.css
CSS3悬停特效合集Hover.css是一款特效丰富,支持2D变化特效.边框特效.阴影特效等: 使用简单,可直接复制相关特效代码,快速应用到元素上. 源码地址:http://www.huiyi8.co ...
- CSS skills: 2) change hover dynamically by js
//命名空间 var base = {}; //class base.gClass={}; //鼠标hover交互方法: 注册对象的hover的class特性以及mouseMoveIn,mouseMo ...
- CSS补充与JavaScript基础
一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...
- Python之路-python(css布局、JavaScript)
CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...
随机推荐
- 3分钟Markdown快速入门与使用
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 注意:图片为效果图 1 标题 #开头代表标题,几个#号代表几级,最高支持六级标题 ...
- htop/dstat/top/ps命令的使用
top命令 显示系统中进程信息 [root@node0 ~]# top top - 09:36:45 up 13:39, 3 users, load average: 0.02, 0.03, 0. ...
- 分类并查集[noi2001 食物链]
题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=pxNJzxVPU 题目有三种动物,A吃B,B吃C,C吃A 即B是A的食物,A是B的天敌, ...
- C学习笔记-多源文件的编译
多源文件的意义 为了精简代码和更好的维护代码,往往需要将一些功能实现的代码与主函数代码分开来 在使用的时候再主函数中调用 多源文件的使用 假设现有my.c和main.c两个源代码文件,现在要再main ...
- Jquery的深浅拷贝涉及到的知识点
1.安全的类型检测 Object.prototype.toString.call(obj) => "[object NativeConstructorName]" /** * ...
- cmake升级到3.10以上
使用yun install cmake3 安装 ,不会覆盖centos7 cmake 1 添加cmake3 源 echo '[group_kdesig-cmake3_EPEL]name=Copr re ...
- Confluence与Jira安装及后期迁移问题记录
Confluence与Jira 由于线上jira和confluence之前互相关联,confluence的登录用户全部关联自jira的用户,confluence安装时会提示是否关联jira,由于这个问 ...
- lnmp1.5部署laravel项目
毕竟laravel是十分有魅力的框架,忍不住想要深入的了解她,费话不多说,直入正题吧 1.composer切换国内镜像源:composer config -g repo.packagist compo ...
- 高性能MySQL3_笔记1_Mysql的架构与历史
第一层:连接处理.授权认证.安全 第二层:mysql的核心功能,包括查询解析.分析.优化.缓存以及所有的内置函数(例如日期.加密.数学函数), 所有跨存储引擎的功能都在这一层实现:存储过程.触发器.视 ...
- 【题解】P3391 文艺平衡树
用pb_ds库中的rope水过去的,忽然发现这玩意能水好多模拟题. 详见这个博客:背景的小姐姐真的好看 声明 #include <ext/rope> using namespace __g ...