使用 :hover 元素的内联样式（使用 HTML/CSS/php）[重复]

Posted 2023-03-05

【中文标题】使用 :hover 元素的内联样式（使用 HTML/CSS/php）[重复]

【英文标题】：Using :hover for an element's inline style (using HTML/CSS/php) [duplicate]

【发布时间】：2011-07-04 01:57:40

【问题描述】：

可能的重复：How do I embed an “a:hover…” rule into a style attribute in the middle of a document?How to write a:hover in inline CSS?

我想动态更改元素的悬停颜色，但不使用外部 CSS 样式表，只使用内联。这是代码（使用php生成元素）

echo '
<div class="container" style="color:#'.$color.'">
  '.$contents.'
</div>';

当用户将鼠标悬停在该容器元素上时，颜色样式将变为$color 的值（此时没有悬停）。

任何帮助将不胜感激。

【问题讨论】：

你不能。见：***.com/questions/1033156/…

这是对***.com/questions/1033156/… 的转贴，悬崖笔记是:hover 是一个伪类，实际上只能在样式表中使用。您可以创建一个类并通过 PHP 分配它或使用一些 JS 来执行 onmouseover 和 onmouseout。

您可以使用 javascipt 来完成。 javascript 好用吗？

是的，我想 Javascript 可以做到。

【参考方案1】：

如果 javascript 是可观的，这将对您有所帮助

<TD onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900>
<A HREF="http://www.mysite.com">Click Here</A></TD>

或

Javascript 在鼠标悬停时更改超链接文本颜色

<style type="text/css">

a 
font-weight:bold;
font-family:verdana;
text-decoration:none;


</style>

<script type="text/javascript" language="javascript">
function changeColor(idObj,colorObj)

    document.getElementById(idObj.id).style.color = colorObj;

</script>

<a href="#" style="color: #000000" onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#000000'">
    Link 1</a>
<br />
<br />
<a href="#" style="color: #999999" onmouseover="this.style.color='#008000'" onmouseout="this.style.color='#999999'">
    Link 2</a>
<br />
<br />
<a href="#" style="color: #FF0000" onmouseover="this.style.color='blue'" onmouseout="this.style.color='#FF0000'">
    Link 3</a>
<br />
<br />
<a id="lnk1" href="#" style="color: #008000" onmouseover="changeColor(this,'#FF0000');"
    onmouseout="changeColor(this,'#008000');">Link Color change using javascript function</a>

【讨论】：

document.getElementById(idObj.id).style.color = colorObj; 也可以这样做：idObj.style.color = colorObj;因为你已经有了对象（this），所以为什么不直接设置它而不用文档再次获取它。 - 无论如何：+1 因为它是动态悬停样式的正确解决方案；）

【参考方案2】：

你不能，因为你不能内联设置伪选择器。理想情况下，您应该在外部 css 中设计单独的类来代表您需要的各种悬停状态，并在 PHP 中将这些类分配给您的内容。