堆栈内存溢出
  繁体   English   中英

如何在内联 CSS 中写入“a:hover”？

[英]How can I write 'a:hover' in inline CSS?

 原文  2009-06-23 15:07:28  1   24    html/ css/ inline-styles

问题描述

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

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

例如，您无法在 HTML 封电子邮件中可靠地使用 CSS 类。

24 个解决方案

解决方案1
 680 已采纳  2009-06-23 15:09:04

简短的回答：你不能。

长答案：你不应该。

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

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

回复 OP 的评论：

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

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

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

注意：以上假设有一个头部。

解决方案2
 572  2009-06-23 15:16:17

您可以通过在onMouseOver和onMouseOut参数中将 styles 更改为 JavaScript 来获得相同的效果，但如果您需要更改多个元素，则效率极低： 

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

另外，我不确定this是否适用于这种情况。 您可能必须使用document.getElementById('idForLink')进行切换。

解决方案3
 59  2012-03-27 05:59:30

你可以在过去的某个时候做到这一点。 但是现在（根据同一标准的最新版本，即候选推荐）你不能。

解决方案4
 45  2009-06-23 15:10:13

您不能完全按照您的描述进行操作，因为a:hover是选择器的一部分，而不是 CSS 规则的一部分。 样式表有两个组件：

selector {rules}

内联styles只有规则； 选择器隐含为当前元素。

选择器是一种表达性语言，它描述了一组标准以匹配类似 XML 的文档中的元素。

但是，您可以接近，因为从技术上讲， style集几乎可以在任何地方使用 go：

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

解决方案5
 41  2015-08-10 09:41:09

我对此做出贡献的时间非常晚，但是我很遗憾没有人建议这样做，如果您确实需要内联代码，则可以这样做。 我需要一些 hover 按钮，方法是这样的： 

 .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;” 是hover上的开关颜色，把你需要的颜色放在那里，然后这个解决方案就起作用了。 我意识到这在兼容性方面可能不是完美的解决方案，但是如果绝对需要，它可以工作。

解决方案6
 32  2013-07-22 08:33:46

使用 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中的多字styles（即font-size ）写在一起：

element.style.fontSize="12px"

解决方案7
 26  2018-01-13 21:31:38

这是最好的代码示例： 

 <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
 25  2021-03-12 10:08:01

虽然似乎不可能内联定义悬停规则，但您可以使用 CSS 变量内联定义 styles 的值： 

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

除了选择器（例如[hover-color]:hover ）之外，考虑使用属性或 class 以允许与其他低特异性 hover 变色规则共存。 （例如 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 重置或使用默认样式的某些元素）

解决方案9
 13  2009-06-23 15:11:18

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

现在，您最好的选择可能是直接在您想要设置样式的链接上方定义一个样式块：

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

解决方案10
 9  2013-05-01 12:58:35

As pointed out, you cannot set arbitrary inline styles for hover, but you can change the style of the hover cursor in CSS using the following in the appropriate tag:

style="cursor: pointer;"

解决方案11
 8  2009-06-23 15:10:57

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

Hover 是伪 class，因此不能与样式属性一起应用。 它是选择器的一部分。

解决方案12
 8  

你可以这样做。 但不在内联 styles 中。 您可以使用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
 5  2009-06-23 15:11:38

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

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

解决方案14
 5  2009-06-23 15:13:54

根据您的评论，无论如何您都在发送 JavaScript 文件。 在 JavaScript 中进行翻转。 jQuery的$.hover()方法使它变得容易，就像所有其他 JavaScript 包装器一样。 直接 JavaScript 也不太难。

解决方案15
 5  2020-01-07 01:35:32

您可以编写各种类型的代码

首先我可以写这个

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ

.one{
  text-decoration: none;
}

你可以尝试另一种方式

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

您也可以在 jquery 中尝试 hover

java 脚本

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

in this code you have a three function in jquery first you ready a function which is the basic of function of jquery then second you have a hover function in this function when you hover a pointer to the text the color will be changed and then the next当您释放指向文本的指针时，它将是不同的颜色，这是第三个 function

解决方案16
 4  2011-09-08 16:57:22

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

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

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

解决方案17
 1  2010-03-26 10:22:11

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

不要说人们需要激活 JavaScript。 这只是一个风格问题，所以如果有一些访问者没有 JavaScript;) 虽然Web 2.0的大部分都适用于 Z686155AF75A60A0F6E9D80C1F7EDD3EZ9。 例如，请参阅Facebook （大量 JavaScript）或Myspace 。

解决方案18
 1  2017-12-12 21:13:11

这在游戏中已经很晚了，但是您何时会在 HTML Email 中使用 JavaScript？ 例如，在我目前工作的公司（与 Abodee 押韵），我们在大多数 email 营销活动中使用最低公分母——而 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.

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

解决方案19
 1  2018-12-06 22:15:52

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

我定义了一些 colors 并将它们传递给每个元素的车把模板。 在模板的顶部，我定义了一个样式标签，并输入了我的自定义 class 和 hover 颜色。

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

解决方案20
 1  2021-01-31 11:42:58

虽然“你不应该”的上下文可能适用，但在某些情况下你仍然想实现这一点。 我的用例是根据某些数据值动态设置 hover 颜色，以仅使用 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>

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

解决方案21
 1  2022-07-01 13:37:12

不完全是内联 CSS 但它是内联哈哈

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

解决方案22
 0  2021-10-23 21:18:23

您可以像这样使用内联样式表语句：

<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>

解决方案23
 -1  2019-01-19 14:38:00

我不得不避免使用 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>

解决方案24
 -1  2020-05-16 00:18:23

现在可以使用Hacss 。

解决方案25
 -3  2012-06-19 12:18:39

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

a:hover {color:#FF00FF;}   /* Mouse-over link */

解决方案26
 -3  2014-08-04 19:47:27

您可以通过添加 class 来执行 id，但不要内联。

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

2 行，但您可以在任何地方重复使用 class。

解决方案27
 -4  2016-08-29 19:05:09

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

 .container div { width: 100px; height: 100px; background-size: 100px 100px; }.container:hover.withoutHover { display: none; }.container.withHover { display: none; }.container:hover.withHover { display: block; }
 <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>

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在内联 CSS 中编写 a:hover 的最佳方法是什么？ 如何在电子邮件中的图片上写文字（内联 css） 如何删除添加的嵌入式CSS？ 如何覆盖重要的内嵌CSS？ 如何使用CSS排除悬停效果 如何在CSS中删除悬停样式 CSS a：内联？ css悬停元素来显示孩子，当我将鼠标悬停在孩子身上时，如何将悬停css保留在父母身上？ 如何为内部图像悬停编写CSS样式？ 如何在 JavaScript 中使用 CSS 内联样式编写 html
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM