如何在鼠標懸停時突出顯示不同div中的文本和圖像

Question

我想達到以下網站上的相同效果：

http://www.kpf.com/projectlist.asp?T=4

將鼠標懸停在圖像上時，相應的文本突出顯示，反之亦然。

我在論壇上找到了一個JavaScript解決方案。 我已復制粘貼以下解決方案：

div代碼

<div style="width:400;height:500;" onmouseover="hightlight()" onmouseout="removehightlight()"><span id="textspan" >This is a test div to show mouseover</span><img id="imgsrc" src="/images/test.gif" /></div>

javascript

<script language="javascript">
function hightlight() 
{   
document.getElementById("textspan").style.color = "blue";
document.getElementById("imgsrc").style.border = "1px solid blue";
//document.getElementById("textspan").setStyle("color","blue");
//document.getElementById("imgsrc").setStyle("border","1px solid blue");
}
function removehightlight() 
{
document.getElementById("textspan").style.color = "black";
document.getElementById("imgsrc").style.border = "0px solid blue";
}    
</script>

但是，此解決方案適用於同一div中的圖像和文本。 我的圖像和文本位於兩個單獨的div中，如下所示：

javascript

function hightlight() 
{
document.getElementById("textspan").style.text = "underline";
document.getElementById("imgsrc").style.border = "5px solid #005596";
}
function removehightlight() 
{
document.getElementById("textspan").style.text = "none";
document.getElementById("imgsrc").style.border = "5px solid white";
}

文本

<div id="left-menu" >
<div align="right">
<p><!-- #BeginLibraryItem "/Library/left-projects-category.lbi" --> <span class="left-title">Category</span><!-- #EndLibraryItem --><br />
<span class="left-sub">Residential</span><br />
<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 Gurney Drive</span><br /></a>
<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">78 LAD</span><br /></a>
</p>
</div>
</div>

圖片

<div style="float:left; margin:90px 0 0 305px; padding:0 0 100px 0; height:auto;">
<img src="../../images/completed-projects/thumbnails/11-gurney-drive.jpg" width="215" height="170" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
<img src="../../images/completed-projects/thumbnails/78-lad.jpg" width="215" height="171" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
/div>

我的問題

我們稱11 Gurney Drive -Text1和11-gurney-drive.jpg -Image1
78 LAD -Text2和78-lad.jpeg -Image2。

我的問題：

在Text1鼠標懸停時，它同時突出顯示Text1和Image1-很好。
在Text2鼠標懸停時，它突出顯示Text2和Image1-應該突出顯示Text2和Image2。
在Image1鼠標懸停時，它僅突出顯示Image1-應該突出顯示Text1和Image1。
在Image2鼠標懸停時，它僅突出顯示Image1-應該突出顯示Text2和Image2。

我對定制Javascript的經驗很少； 已經嘗試使用谷歌搜索getElementbyId，但是所有這些可能都用希臘語。

編輯

我忘了提到我曾嘗試添加一個名為textspan2和imgsrc2的第二個唯一元素ID，但這似乎沒有用。 我做了什么：

javascript

function hightlight() 
{
document.getElementById("textspan").style.text = "underline";
document.getElementById("imgsrc").style.border = "5px solid #005596";
document.getElementById("textspan2").style.text = "underline";
document.getElementById("imgsrc2").style.border = "5px solid #005596";
}
function removehightlight() 
{
document.getElementById("textspan").style.text = "none";
document.getElementById("imgsrc").style.border = "5px solid white";
document.getElementById("textspan2").style.text = "none";
document.getElementById("imgsrc2").style.border = "5px solid white";
}

文本

<div id="left-menu" >
<div align="right">
<p><!-- #BeginLibraryItem "/Library/left-projects-category.lbi" --> <span class="left-title">Category</span><!-- #EndLibraryItem --><br />
<span class="left-sub">Residential</span><br />
<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 Gurney Drive</span><br /></a>
<a href="#" class="btn-list"><span id="textspan2" onmouseover="hightlight()" onmouseout="removehightlight()">78 LAD</span><br /></a>
</p>
</div>
</div>

圖片

<div style="float:left; margin:90px 0 0 305px; padding:0 0 100px 0; height:auto;">
<img src="../../images/completed-projects/thumbnails/11-gurney-drive.jpg" width="215" height="170" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
<img src="../../images/completed-projects/thumbnails/78-lad.jpg" width="215" height="171" id="imgsrc2" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
/div>

Answer 1

getElementById是實際執行其所說內容的那些調用之一。 :-)通過其id屬性獲取DOM元素。 由於id必須是唯一的，因此它為您提供了一個可以與之交互的特定元素（例如，設置其樣式屬性）。

因此，問題的一部分就是您有兩個ID為“ textspan”的元素和兩個ID為“ imgsrc”的元素，這意味着瀏覽器將執行未定義的操作，因為您無法執行此操作 。

在事件處理程序中， this將指向您放置處理程序的元素。 因此，在您highlight和removeHighlight功能，你可以使用this （而不是getElementById ）去的參考img DOM元素。 剩下的只是文字內容。

您可以使用命名約定（例如，“ textspan1”和“ imgsrc1”，“ textspan2”和“ imgsrc2”），因此處理程序如下所示：

 function hightlight() { var textid = this.id.replace("imgsrc", "textspan"); var text = document.getElementById(textid); text.style.color = "blue"; this.style.border = "1px solid blue"; } function removehightlight() { var textid = this.id.replace("imgsrc", "textspan"); var text = document.getElementById(textid); text.style.color = "black"; this.style.border = "0px solid blue"; } 

...或者您可以在img標簽上使用屬性（例如data-text ），該屬性給出與其鏈接的文本字段的ID； 您可以從DOM元素獲取如下屬性：

 var textid = this.getAttribute("data-text"); 

自定義屬性在HTML4及以下版本中無效，但我從未遇到過出現問題的瀏覽器。 在HTML5及更高版本中，您可以具有自定義屬性，只要它們以data-開頭（如上所述）即可。 因此，如果驗證是您工作實踐的一部分（通常是個好主意），則可以考慮開始使用HTML5文檔類型，除非您有特殊的理由要保留前一個（例如，對於使用該文檔感到不舒服）尚未到達候選推薦階段的HTML5版本的文檔類型）。 我們許多人很高興現在就繼續前進 。

this不是您連接處理程序的方式的元素。 我已經忘記了，自從我使用DOM0掛鈎處理程序（ onmouseover= ）以來已有很長時間了。 但是下面的作品：

或者 ，由於您附加了處理程序的方式，您可以將一個參數傳遞給函數，告訴它們要處理的是哪個：

 function hightlight(index) { var img = document.getElementById("imgsrc" + index); var text = document.getElementById("textspan" + index); text.style.color = "blue"; img.style.border = "1px solid blue"; } function removehightlight(index) { var img = document.getElementById("imgsrc" + index); var text = document.getElementById("textspan" + index); text.style.color = "black"; img.style.border = "0px solid blue"; } 

...您的onmouseover和onmouseout屬性更改為：

<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 <strong>Gurney</strong> Drive</span><br /></a>

這是一個生動的例子 。

旁注 ：您找到的代碼正在使用mouseover和mouseout事件。 請注意，盡管您使用它們的特定方式大部分都很好 （盡管您做的工作比必要的多，但這沒關系），但是這些人並沒有完全按照您的預期做，並且會咬您。 但是，假設您的標記有所變化：

 <a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 <strong>Gurney</strong> Drive</span><br /></a> 

現在，您正在監視這些事件的范圍內有一個元素。 這意味着，當用戶的鼠標從左向右移動時，當鼠標在文本“ 11（space）”上移動時，您將看到一系列 mouseover事件，然后您的代碼將在鼠標移動時看到一個mouseout事件變成“ Gurney”一詞。 為什么會這樣？ 由於鼠標已移出的span和到 strong的元素。 然后它將立即看到另一個mouseover ，因為鼠標移到strong元素上，並且mouseover事件使DOM冒泡，因此我們可以在span上看到它。 當鼠標移入或移出strong元素時，這可能會導致閃爍。

Internet Explorer具有mouseenter和mouseleave事件，它們更適合您的工作，但是誰想使用僅限於一種品牌瀏覽器的事件呢？ 好吧，即使是在本機不支持它們的瀏覽器上，大多數優秀的JavaScript庫也可以模擬這些事件，這使我開始...

題外1 ：

如果您剛開始在瀏覽器上使用JavaScript，請注意以下幾點： jQuery ， Prototype ， YUI ， Closure或其他幾種庫可以消除許多瀏覽器不一致和笨拙（如果是這樣的話）為您結束。 對於您在此問題中所做的事情，恩，它們不會帶來巨大的價值。 但是對於更復雜的東西，它們可以利用許多其他人在您之前所做的出色工作為您節省大量時間和麻煩。 例如，在不支持它們的瀏覽器中模擬mouseenter和mouseleave 。 :-)我知道jQuery和Prototype都能為您做到這一點，我懷疑其他人也能做到。

題外2 ：

這是“突出顯示”，而不是“突出顯示”。 如果有人以后需要維護您的代碼，那么該錯字（這是一致的，因此不是錯誤！）可能會使他們絆倒。 另外，標准做法（您可以隨意忽略！）是在函數名稱中使用駝峰式單詞，因此， removeHighlight而不是removehightlight 。 FWIW。