如何写：悬停在内联CSS？

时间：2009-06-23 15:07:29

标签： html css inline-styles

我有一个必须编写内联CSS代码的情况，我想在锚点上应用悬停样式。

如何在HTML样式属性中的内联CSS中使用a:hover？

E.g。你无法在HTML电子邮件中可靠地使用CSS类。

24 个答案:

答案 0 :(得分：518)

简短回答：你不能。

答案很长：你不应该。

为其指定一个类名或ID，并使用样式表来应用该样式。

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

回应OP的评论：

有关动态添加CSS规则的优秀脚本，请参阅 Totally Pwn CSS with Javascript 。另请参阅 Change style sheet 了解有关该主题的一些理论。

此外，请不要忘记，如果可以选择，您可以添加指向外部样式表的链接。例如，

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

警告：以上假设有一个head部分。

答案 1 :(得分：382)

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

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

此外，我无法确定this是否适用于此上下文。您可能需要使用document.getElementById('idForLink')切换它。

答案 2 :(得分：49)

在过去的某个时刻

You could do it。但是现在（根据同一标准的最新修订，即候选推荐）你不能     

答案 3 :(得分：33)

我＆＃39; M这个极晚贡献，但是我很遗憾地看到没有人提出这一点，如果你真的需要内嵌代码，这是可以做到的。我需要它用于一些悬停按钮，方法是这样的：

＆＃13;
＆＃13; 
.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
＆＃13; 
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a
＆＃13;
＆＃13;
＆＃13;

在这种情况下，内联代码：＆＃34; background-color：red;＆＃34;是悬停时的开关颜色，将您需要的颜色放入那里然后此解决方案有效。我意识到这可能不是兼容性方面的完美解决方案，但如果绝对需要，这可行。

答案 4 :(得分：28)

使用Javascript：

a）添加内联样式

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b）或更难的方法 - 添加“mouseover”

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"

答案 5 :(得分：25)

你无法完全按照自己的描述去做，因为a:hover是选择器的一部分，而不是CSS规则。样式表有两个组成部分：

selector {rules}

内联样式只有规则;选择器隐式为当前元素。

选择器是一种富有表现力的语言，它描述了一组匹配类XML文档中元素的标准。

但是，你可以近距离接触，因为style套装在技术上最适合任何地方：

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

答案 6 :(得分：10)

CSS的当前迭代不支持内联伪类声明（但据我所知，它可能会出现在将来的版本中）。

目前，您最好的选择可能只是在要设置样式的链接正上方定义样式块：

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

答案 7 :(得分：10)

这是最好的代码示例：

<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'
}

答案 8 :(得分：7)

正如所指出的，您不能为悬停设置任意内联样式，但您可以使用相应标记中的以下内容在CSS中更改悬停光标的样式：

style="cursor: pointer;"

答案 9 :(得分：6)

虽然内联定义悬停规则似乎是不可能的，但您可以使用 CSS 变量和代理类或属性内联定义样式的值：

[hover-color]:hover {
  color: var(--hover-color);
}
<a
  style="--hover-color: green"
  hover-color>
    Library
</a>

请注意，属性的使用是可选的（可以用 * 替换），但为了避免对页面产生副作用，建议使用所提供的解决方案。

答案 10 :(得分：4)

根据您的评论，您无论如何都要发送JavaScript文件。在JavaScript中进行翻转。 jQuery的$.hover()方法与其他JavaScript包装器一样简单。直接JavaScript也不难。

答案 11 :(得分：4)

没有办法做到这一点。您可以选择使用JavaScript或CSS块。

也许有一些JavaScript库会将专有样式属性转换为样式块。但那时代码将不符合标准。

答案 12 :(得分：4)

您可以执行此操作。但不是内联样式。您可以使用onmouseover和onmouseout事件：

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>

答案 13 :(得分：4)

<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover是一个伪类，因此无法应用style属性。它是选择器的一部分。

答案 14 :(得分：2)

我刚想出了一个不同的解决方案。

我的问题：我在一些幻灯片/主要内容查看器周围有一个<a>标记以及页脚中的<a>标记。我希望他们去IE中的同一个地方，所以整个段落都会加下划线onHover，即使它们不是链接：整个幻灯片是一个链接。 IE不知道区别。我的页脚中还有一些实际链接需要下划线和颜色更改onHover。我认为我必须将样式与页脚标签内联以使颜色发生变化，但上面的建议表明这是不可能的。

解决方案：我给了页脚链接两个不同的类，我的问题解决了。我能够在一个类中进行onHover颜色更改，幻灯片onHover没有颜色更改/下划线，并且仍然可以在页脚和幻灯片中同时使用外部HREFS ！

答案 15 :(得分：1)

我同意 shadow 。您可以使用onmouseover和onmouseout事件通过JavaScript更改CSS。

并且不要说人们需要激活JavaScript。这只是一个样式问题，所以如果有一些访问者没有JavaScript，这并不重要;） 虽然大多数Web 2.0都适用于JavaScript。例如，请参阅Facebook（许多JavaScript）或Myspace。

答案 16 :(得分：0)

这在游戏中已经很晚了，但什么时候会在HTML电子邮件中使用JavaScript？例如，在我目前工作的公司（与Abodee押韵）中，我们对大多数电子邮件营销活动使用最低的共同点 - 而JavaScript只是没有被使用。永远。除非你指的是某种预处理。

正如相关文章中所述：“Lotus Notes，Mozilla Thunderbird，Outlook Express和Windows Live Mail似乎都支持某种JavaScript执行。没有别的。”

链接到拍摄该文章的文章：[http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

此外，如何将悬停转换为移动设备？这就是为什么我喜欢上面的答案：Long answer: you shouldn't.

如果有人对此主题有更多见解，请随时纠正我。谢谢。

答案 17 :(得分：0)

所以这并不是用户想要的，但是我发现这个问题在寻找答案，并提出了一些相关的问题。我有一堆重复的元素，它们中的选项卡需要新的颜色/悬停。我使用把手，这是解决方案的关键，但是其他模板语言也可以使用。

我定义了一些颜色，并将它们传递到每个元素的车把模板中。在模板的顶部，我定义了一个样式标签，并添加了自定义类和悬停颜色。

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

然后我在模板中使用了样式：

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

您可能不需要!important

答案 18 :(得分：0)

我必须避免使用javascript，但可以使用服务器端代码。

所以我生成了一个ID，创建了一个样式块，并生成了具有该ID的链接。是的，它是有效的HTML。 

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>

答案 19 :(得分：0)

Hacss现在可以实现。

答案 20 :(得分：0)

虽然“你不应该”的上下文可能适用，但在某些情况下你仍然希望实现这一目标。 我的用例是根据某些数据值动态设置悬停颜色，以便仅使用 CSS 就可以实现这一点，您可以从特异性中受益。

仅处理 CSS

CSS


/* Set your parent color for the inherit property */
.sidebar {
  color: green;
}

/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
  color: inherit
}

.list-item a:hover {
  color: inherit
}

/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
  color: inherit !important;
}

那么你的标记会有点像：

标记

<nav class="sidebar">
  <ul>
    <li class="list-item">
      <a
        href="/foo"
        class="dynamic-hover-color"
        style="color: #{{category.color}};"
      >
        Category
      </a>
    </li>
  </ul>
</nav>
<块引用>

我正在使用把手来做这个例子，但我的想法是你可以使用任何方便你的用例来设置内联样式（即使它手动编写你想要的悬停颜色）

答案 21 :(得分：-2)

我的问题是我正在建立一个网站，该网站使用大量的图像图标，这些图标必须在悬停时由不同的图像交换（例如，蓝色图像在悬停时变为红色）。 我为此制作了以下解决方案：

＆＃13;
＆＃13; 
.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}
＆＃13; 
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

我介绍了一个包含这对图像的容器。第一个是可见的，另一个是隐藏的（显示：无）。当悬停容器时，第一个变为隐藏（显示：无），第二个再次显示（显示：阻止）。

答案 22 :(得分：-2)

您可以通过添加类来执行id但从不内联。

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2行，但你可以在任何地方重复使用该课程。

答案 23 :(得分：-2)

您只能在外部样式表中使用伪类a:hover。因此，我建议使用外部样式表。代码是：

a:hover {color:#FF00FF;}   /* Mouse-over link */
相关问题
最新问题