我有一个情况下,我必须写内联CSS代码,我想应用悬停样式的锚。
我如何使用一个:悬停在内联CSS内的HTML样式属性?
例如,你不能可靠地在HTML电子邮件中使用CSS类。
我有一个情况下,我必须写内联CSS代码,我想应用悬停样式的锚。
我如何使用一个:悬停在内联CSS内的HTML样式属性?
例如,你不能可靠地在HTML电子邮件中使用CSS类。
当前回答
简单的回答是:你不能。
长话短说:你不应该。
给它一个类名或id,并使用样式表应用样式。
:hover是一个伪选择器,对于CSS来说,它只在样式表中有意义。没有任何内联样式的对等物(因为它没有定义选择标准)。
回应行政长官的评论:
关于动态添加CSS规则的好脚本,请参阅完全Pwn CSS with Javascript。关于这个主题的一些理论,请参见Change样式表。
另外,不要忘记,如果可以的话,还可以添加到外部样式表的链接。例如,
<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>
注意:以上假设有一个头部部分。
其他回答
根据您的注释,您发送的是一个JavaScript文件。用JavaScript进行翻转。jQuery的$.hover()方法使它变得很容易,就像所有其他JavaScript包装器一样。这在JavaScript中也不是很难。
简单的回答是:你不能。
长话短说:你不应该。
给它一个类名或id,并使用样式表应用样式。
:hover是一个伪选择器,对于CSS来说,它只在样式表中有意义。没有任何内联样式的对等物(因为它没有定义选择标准)。
回应行政长官的评论:
关于动态添加CSS规则的好脚本,请参阅完全Pwn CSS with Javascript。关于这个主题的一些理论,请参见Change样式表。
另外,不要忘记,如果可以的话,还可以添加到外部样式表的链接。例如,
<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>
注意:以上假设有一个头部部分。
你可以在过去的某个时候这样做。但现在(根据同一标准的最新修订,即候选人推荐)你不能这样做了 .
您可以编写各种类型的代码。
首先我可以这样写
HTML
<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>
CSS
.one {
text-decoration: none;
}
你可以试试另一种方法:
HTML
<a href="https://www.google.com/" class="one">Hello siraj</a>
CSS
.one {
text-decoration: none;
}
.one:hover {
color: blue;
}
.one:active {
color: red;
}
你也可以在jQuery中尝试hover:
JavaScript
$(document).ready(function() {
$("p").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "pink");
});
});
HTML
<p>Hover the mouse pointer over this paragraph.</p>
在这段代码中,有三个jQuery函数。首先你准备一个函数,这是jQuery的基本函数。其次,在这个函数中有一个悬停函数。当你将一个指针悬停到文本上时,颜色会改变,然后当你释放指向文本的指针时,它会是不同的颜色,这是第三个函数。
使用JavaScript:
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',''); };
注意:JavaScript中的多词样式(即font-size)是一起编写的:
element.style.fontSize="12px"