如何在鼠标悬停上突出显示文本

问题描述：

我有一个包含多个帧的约300个链接的页面。每个链接都有一个id，至少与另一个框架中的id相对应。我正在编写一个脚本，它将突出显示两个链接上的链接。目前，我可以更改这两个链接的文字颜色（见下文）。我想将单个单词背后的背景颜色更改为黄色，以使文本显示为突出显示。如何在鼠标悬停上突出显示文本

<html><head><title>Test</title> 
    <script> 
    function hey(id) 
     {document.getElementById(id).style.color = "red"; 
     window.parent.frames["frame2"].document.getElementById(id).style.color = "red";} 
    function bye(id) 
     {document.getElementById(id).style.color = "black"; 
     window.parent.frames["frame2"].document.getElementById(id).style.color = "black";} 
    </script> 
</head> 
<body> 
    <a id="1" class="word" onmouseover="hey(this.id)" onmouseout="bye(this.id)">hello</a> 
    <a id="2" class="word" onmouseover="hey(this.id)" onmouseout="bye(this.id)">world</a>.... 
</body></html>

如何更改链接的背景颜色，同时保持窗口背景的其余部分不变？

答

您应该能够通过链接（S）的修改style.backgroundColor做到这一点：

window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "yellow";

这样做了。我想我必须把它放在一个悬停的CSS中。这很简单。谢谢。 – parap 2013-02-20 15:04:44

作为一个侧面提示：在CSS中编写样式细节并通过JS添加类可能是一个不错的选择，因为您不需要编辑HTML/JS源文件以更改颜色。 – techfoobar 2013-02-20 15:12:26

好点。我会把它放入我的CSS中。 – parap 2013-02-20 15:18:07

答

在onmouseover事件将这个：

document.getElementById(id).style.backgroundColor = "red";

你需要把相同的指令与您在onMouseOut事件上的初始背景颜色。

例如

onmouseover="document.getElementById(id).style.backgroundColor = 'red';" onmouseout = "document.getElementById(id).style.backgroundColor = 'white';"

答

首先，你id不能只是一个数字，也不能以数字开头。编辑它，然后在您的onmouseout事件中将这个：document.getElementById(id).style.backgroundColor = "red";放入您的onmouseover和document.getElementById(id).style.backgroundColor = "black";。

只有在Firefox中才能正常工作。那是因为firefox是不是白痴？这会导致我与其他浏览器出现问题吗？ – parap 2013-02-20 15:07:18

是的，很可能你会遇到IE的问题，因为命名约定不符合W3C规范。 – bodi0 2013-02-20 16:12:14

答

我想你想要的是选择。

function hey(id) 
{ 
    var frame_2_element = window.parent.frames["frame2"].document.getElementById(id); 
    document.getElementById(id).style.color = "red"; 
    frame_2_element.style.color = "red"; 
    frame_2_element.mozSelection = "yellow"; 
    frame_2_element.body.mozSelection = "yellow"; 
}

这会改变选定的文本背景颜色，是想要的行为？

它更容易在jquery – IdanHen 2013-02-20 15:07:02

teckfoobar得到了我想要的。不过谢谢。 – parap 2013-02-20 15:09:22

答

下面是使用Techfoobar解决方案编辑的HTML。 ID也改为以字母开头。

<html><head><title>Test</title> 
<script> 
function hey(id) 
    {document.getElementById(id).style.color = "red"; 
    document.getElementById(id).style.backgroundColor = "yellow"; 
    window.parent.frames["frame2"].document.getElementById(id).style.color = "red"; 
    window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "yellow";} 
function bye(id) 
    {document.getElementById(id).style.color = "black"; 
    document.getElementById(id).style.backgroundColor = "white"; 
    window.parent.frames["frame2"].document.getElementById(id).style.color = "black"; 
    window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "white";} 
</script> 
</head> 
<body> 
    <a id="w1" class="word" onmouseover="hey(this.id)" onmouseout="bye(this.id)">hello</a> 
    <a id="w2" class="word" onmouseover="hey(this.id)" onmouseout="bye(this.id)">world</a>.... 
</body></html>

如何在鼠标悬停上突出显示文本

相关推荐