Amr*_*rhy 961 html css inline-styles
我有一个案例,我必须编写内联CSS代码,我想在锚点上应用悬停样式.
如何a:hover在HTML样式属性中使用内联CSS？
例如,您无法在HTML电子邮件中可靠地使用CSS类.
Jon*_*and 538
简短的回答:你做不到.
答案很长:你不应该.
给它一个类名或id,并使用样式表来应用样式.
:hover是一个伪选择器,对于CSS,它只在样式表中有意义.没有任何内联样式的等价物(因为它没有定义选择标准).
回应OP的评论:
有关动态添加CSS规则的好脚本,请参阅使用Javascript的Totally Pwn CSS.另请参阅更改样式表以了解有关该主题的一些理论.
此外,不要忘记,如果可以选择,您可以添加外部样式表的链接.例如,
<script type="text/javascript">
var link = document.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("href","http://wherever.com/yourstylesheet.css");
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
</script>
注意:上面假设有一个头部.
Ale*_*x S 405
您可以通过在onMouseOver和onMouseOut参数中使用JavaScript更改样式来获得相同的效果,但如果您需要更改多个元素,则效率非常低:
<a href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'" >Text</a>此外,我不记得是否this可以在这种情况下工作.您可能需要切换它document.getElementById('idForLink').
fud*_*din 51
你可以在过去的某个时候做到这一点.但是现在(根据同一标准的最新修订,即候选推荐)你不能.
luk*_*srw 33
我为此做出了很晚的贡献,但是我很难过看到没有人建议这一点,如果你真的需要内联代码,这是可能的.我需要它用于一些悬停按钮,方法是这样的:
.hover-item {
background-color: #FFF;
}
.hover-item:hover {
background-color: inherit;
}<a style="background-color: red;">
<div class="hover-item">
Content
</div>
</a在这种情况下,内联代码:"background-color:red;" 是悬停时的开关颜色,把你需要的颜色放到那里,然后这个解决方案工作.我意识到这可能不是兼容性方面的完美解决方案,但如果绝对需要,这可行.
T.T*_*dua 29
a)添加内联样式
document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');
b)或更难的方法 - 添加"鼠标悬停"
document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };
注意:font-sizeJavascript中的多字样式(即)一起写入:
element.style.fontSize="12px"
Rex*_*x M 28
你不能完全按照你所描述的那样做,因为它a:hover是选择器的一部分,而不是CSS规则.样式表有两个组件:
selector {rules}
内联样式只有规则; 选择器隐式为当前元素.
选择器是一种富有表现力的语言,它描述了一组匹配XML类文档中元素的标准.
但是,您可以近距离接触,因为style技术上可以在任何地方使用:
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
小智 11
这是最好的代码示例:
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
onmouseover="this.style.color='#0F0'"
onmouseout="this.style.color='#00F'">
Library
</a>主持人建议:保持关注点分离.
HTML
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
class="lib-link">
Library
</a>JS
const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
this.style.color='#0F0'
}
libLink.onmouseout = function () {
this.style.color='#00F'
}ink*_*dmn 10
CSS的当前迭代不支持内联伪类声明(但据我所知,它可能会出现在未来的版本中).
现在,您最好的选择可能只是在要设置样式的链接上方定义样式块:
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
<style>a:hover { }</style>
<a href="/">Go Home</a>
Hover 是一个伪类，因此不能与 style 属性一起应用。它是选择器的一部分。
正如所指出的,您不能为悬停设置任意内联样式,但您可以使用相应标记中的以下内容在CSS中更改悬停光标的样式:
style="cursor: pointer;"
小智 8
你可以这样做。但不是内联样式。您可以使用onmouseover和onmouseout事件：
<div style="background: #333; padding: 10px; cursor: pointer"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
Hover on me!
</div>虽然内联定义悬停规则似乎是不可能的，但您可以使用 CSS 变量和代理类或属性来定义内联样式的值：
[hover-color]:hover {
color: var(--hover-color);
}<a
style="--hover-color: green"
hover-color>
Library
</a>请注意，属性的使用是可选的（可以用 a 替换*），但为了避免对页面产生副作用，建议使用所提供的解决方案。
小智 7
它不完全是内联 CSS，但它是内联的。
<a href="abc.html" onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'">Text</a>| 归档时间： |
|
| 查看次数： |
970709 次 |
| 最近记录： |