如何在内联 css 中使用 hover 操作？

7 个月前提问

3 个月前修改

浏览次数136次

6个答案

在内联CSS中，由于直接作用于HTML元素的 "style" 属性中无法包含伪类选择器，我们不能直接在标签的 "style" 属性内设置 "a:hover"。内联样式主要用于单个元素的样式设置，而":hover" 是一个伪类选择器，通常是在内部样式表或外部样式表中定义的。

然而，如果你想要达到类似的效果而只能使用内联样式，你可以使用JavaScript来动态改变元素的样式当鼠标悬停在上面。这是一个示例代码，演示如何使用JavaScript来模拟 a:hover 的效果：

html
<a href="#" id="hoverLink" onmouseover="hoverEffect(true)" onmouseout="hoverEffect(false)">Hover over me!</a>

<script>
function hoverEffect(isHovering) {
  var link = document.getElementById('hoverLink');
  if (isHovering) {
    link.style.color = 'red'; // 鼠标悬停时的颜色
    link.style.textDecoration = 'underline'; // 鼠标悬停时的文本装饰
  } else {
    link.style.color = 'initial'; // 鼠标离开时的颜色
    link.style.textDecoration = 'none'; // 鼠标离开时的文本装饰
  }
}
</script>

在这个例子中，当鼠标悬停在链接上时，hoverEffect(true) 被调用，将链接的文本颜色设置为红色并且下划线。当鼠标离开链接时，hoverEffect(false) 被调用，将链接的样式恢复到初始状态。通过这种方法，我们可以模拟内联CSS中的 a:hover 效果。

2024年6月29日 12:07 回复

简短的回答：你不能。

长答案：你不应该。

给它一个类名或一个 id，并使用样式表来应用样式。

:hover是一个伪选择器，对于CSS来说，仅在样式表中有意义。没有任何内联样式的等效项（因为它没有定义选择标准）。

对OP评论的回应：

请参阅_Totally Pwn CSS with Javascript，了解动态添加 CSS 规则的好脚本。另请参阅更改样式表_以了解有关该主题的一些理论。

另外，不要忘记，如果可以的话，您可以添加到外部样式表的链接。例如，

shell
<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>

注意：以上假设有头部。

2024年6月29日 12:07 回复

onMouseOver您可以通过在和参数中使用 JavaScript 更改样式来获得相同的效果onMouseOut，尽管如果您需要更改多个元素，则效率极低：

shell
<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

运行代码片段Hide results

展开片段

另外，我无法确定this在这种情况下是否有效。您可能需要使用来切换它document.getElementById('idForLink')。

2024年6月29日 12:07 回复

You could do it at some point in the past. But now (according to the latest revision of the same standard, which is Candidate Recommendation) you can't .

2024年6月29日 12:07 回复

You can't do exactly what you're describing, since a:hover is part of the selector, not the CSS rules. A stylesheet has two components:

shell
selector {rules}

Inline styles only have rules; the selector is implicit to be the current element.

The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.

However, you can get close, because a style set can technically go almost anywhere:

shell
<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>

2024年6月29日 12:07 回复

While it appears to be impossible to define a hover-rule inline, you can define the value of styles inline using a CSS variable:

shell
:hover {
  color: var(--hover-color);
}

<a style="--hover-color: green">
    Library
</a>

Run code snippetHide results

Expand snippet

Consider using an attribute or a class in addition to the selector (e.g., [hover-color]:hover) to allow coexistence with other low specificity hover color changing rules (from, e.g., a CSS reset or some elements using the default style).

2024年6月29日 12:07 回复

如何在内联 css 中使用 hover 操作？

6个答案

你的答案