使用:hover为元素的内联样式（使用HTML/CSS/php）

Question

可能重复：
如何在文档中间将“a:hover{...}”规则嵌入到样式属性中？
如何在内联CSS中编写a:hover？

我想动态更改元素的悬停颜色，但仅使用内联而非外部CSS样式表。以下是使用PHP生成元素的代码：

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

当用户悬停在此容器元素上时，颜色样式将更改为$color的值（目前没有悬停）。

感谢您提供的任何帮助。

- Jared

---

你做不到。请参见：https://dev59.com/GXNA5IYBdhLWcg3wQ7cw - jterrace

这是一个重新发布的内容：https://dev59.com/GXNA5IYBdhLWcg3wQ7cw简而言之，:hover 是一个伪类，只能在样式表中使用。您可以创建一个类并通过 PHP 分配它，或者使用一些 JS 来执行 onmouseover 和 onmouseout。 - Xenethyl

你可以使用JavaScript完成它。JavaScript值得赞赏吗？ - Sujeet

是的，我想JavaScript可以做到。 - Jared

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

- Sujeet

---

document.getElementById(idObj.id).style.color = colorObj;也可以这样写：idObj.style.color = colorObj;因为你已经有了对象(this)，为什么不直接在那里设置它，而不需要再次使用document获取它呢？- 不管怎样，+1因为这是一个动态悬停样式的正确解决方案 ;) - DominikAngerer

Answer 2

由于您无法在行内设置伪选择器，因此无法实现该操作。理想情况下，您应该在外部CSS中设计单独的类来表示所需的各种悬停状态，并在PHP中将这些类分配给您的内容。

- Russell Dias