内联样式充当:hover在CSS中

我知道将CSS样式直接embedded到他们所影响的HTML标签中会大大影响CSS的用途,但是有时这对于debugging的目的很有用,如下所示:

<p style="font-size: 24px">asdf</p> 

embedded规则的语法如下:

 a:hover {text-decoration: underline;} 

进入A标签的样式属性? 这显然不是这个…

 <a href="foo" style="text-decoration: underline">bar</a> 

…因为这将始终适用,而不是在盘旋期间。

6 Solutions collect form web for “内联样式充当:hover在CSS中”

恐怕不能完成,伪类select器不能在线设置,你必须在页面或样式表上执行。

我应该提到, 技术上应该能够按照CSS规范来做,但大多数浏览器不支持它

编辑:我只是做了这个快速testing:

 <a href="test.html" style="{color: blue; background: white} :visited {color: green} :hover {background: yellow} :visited:hover {color: purple}">Test</a> 

而且在IE7,IE8 beta2,Firefox或Chrome中不起作用。 任何人都可以在其他浏览器中testing吗?

如果你只是debugging,你可能会使用JavaScript来修改CSS:

 <a onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">bar</a> 

如果是用于debugging,只需添加一个CSS类hover(因为元素可以有多个类):

 a.hovertest:hover { text-decoration:underline; } <a href="http://example.com" class="foo bar hovertest">blah</a> 

简单的解决scheme:

  <a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a> 

要么

 <script> /** Change the style **/ function overStyle(object){ object.style.color = 'orange'; // Change some other properties ... } /** Restores the style **/ function outStyle(object){ object.style.color = 'orange'; // Restore the rest ... } </script> <a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a> 

我为任何想要使用onmouseover和onmouseout行为创buildhover弹窗而没有CSS的快速解决scheme。

http://jsfiddle.net/Lk9w1mkv/

 <div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div> 

我不认为jQuery支持伪select器,但它确实提供了一个快速的方法来添加事件到单个页面上的一个,多个或所有类似的控件和标签。

最重要的是,您可以链接事件绑定,并在一行脚本中完成所有操作。 比手动编辑所有HTML来打开或closures它们要容易得多。 再次,因为你可以在CSS中做同样的事情,我不知道它会给你买什么(除了学习jQuery)。

  • 什么是HTML字符码8203?
  • HTML5 Canvas旋转图像
  • 在段落的第一行之后的文本缩进
  • 在HTML中显示unicode符号
  • 如何find一个网站上的链接
  • 有没有办法让一个<button>元素链接到一个位置,而不是包装在一个<a href ...标签?
  • 用JavaScript插入HTML元素
  • 使用CSS更改hover上的兄弟元素的颜色
  • 如何获得JSvariables保留页面刷新后的值?
  • 两种提交button的一种forms
  • 如何使用knitr导入本地图像进行降价