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

发布于 2024-10-19 07:06:07 字数 611 浏览 0 评论 0原文

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

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

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

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

任何帮助将不胜感激。

原文

Possible Duplicates:
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?

I want to dynamically change the hover colour of an element, but not using external CSS stylesheets, only inline. This is the code (using php to generate the element)

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

When the user hovers over this container element, the color style will change to the value of $color (at the moment there is no hovering).

Any help would be appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猛虎独行 2024-10-26 07:06:07

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

This will help you if javascript is appreciable

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

Javascript Change Hyperlink Text Color Onmouseover

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

回复收藏 0 原文