如何在鼠標懸停上突出顯示文本

我有一個包含多個幀的約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>

如何更改鏈接的背景顏色，同時保持窗口背景的其餘部分不變？

來源

2013-02-20 parap

您應該能夠通過鏈接（S）的修改style.backgroundColor做到這一點：

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

來源

2013-02-20 14:57:23 techfoobar

這樣做了。我想我必須把它放在一個懸停的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';"

來源

2013-02-20 14:58:25 Fab

首先，你id不能只是一個數字，也不能以數字開頭。編輯它，然後在您的onmouseout事件中將這個：document.getElementById(id).style.backgroundColor = "red";放入您的onmouseover和document.getElementById(id).style.backgroundColor = "black";。

來源

2013-02-20 14:59:13 bodi0

只有在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"; 
}

這會改變選定的文本背景顏色，是想要的行爲？

來源

2013-02-20 15:05:36 IdanHen

它更容易在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>

來源

2013-02-20 15:16:33 parap

如何在鼠標懸停上突出顯示文本

回答

相關問題