Javascript 如何在鼠标上方突出显示不同div中的文本和图像

我希望达到与以下网站相同的效果：

鼠标悬停在图像上方时，相应的文本会高亮显示，反之亦然

我在论坛上找到了一个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>

文本

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

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

文本

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

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

类别

住宅

图像

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

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

/div>

getElementById

是一个实际执行它所说内容的调用。：-）它通过其

id

属性获取DOM元素。由于

id

必须是唯一的，因此它会为您提供一个特定的元素，然后您可以与之交互（例如，设置其样式属性）

因此，部分问题在于有两个ID为“textspan”的元素和两个ID为“imgsrc”的元素，这意味着浏览器将执行一些未定义的操作，因为

在事件处理程序中，

此

将指向已放置处理程序的元素。因此，在

高亮显示

和

移除高亮显示

函数中，可以使用

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";
}  

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

…或者您可以在

img

标记上使用一个属性（例如，

data text

），该属性提供链接到它的文本字段的ID；您可以从DOM元素获得如下属性：

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";
}  

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

自定义属性在HTML4及以下版本中无效，但我从未遇到过浏览器出现问题。在HTML5和更高版本中，您可以拥有自定义属性，只要它们以上面的

data-

开头即可。因此，如果是你的工作实践的一部分（通常是一个好主意），你可能会考虑开始使用HTML5 DOCTYPE，除非你有一个特定的原因与前一个（例如，你不舒服，使用一个HTML5版本，甚至还没有达到候选推荐阶段的DOCTYPE）。我们很多人都是

这不是连接处理程序的方式。我忘了，我已经很久没有使用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
属性更改为：

onmouseover="hightlight(1);" onmouseout="removehightlight(1);"
onmouseover="hightlight(2);" onmouseout="removehightlight(2);"

这是一个例子

旁注：您找到的代码正在使用
mouseover
和
mouseout
事件。请注意，这些人并没有完全做到你所期望的，这可能会咬到你，尽管你使用他们的具体方式基本上是好的（你做的工作比必要的多，但没关系）。但假设您的标记发生了一点变化：

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



现在，在跨度内有一个元素，您正在观看这些事件。这意味着当用户的鼠标从左向右移动时，当鼠标在文本“11（空格）”上移动时，您将看到一系列
mouseover
事件，然后当鼠标移动到单词“Gurney”上时，您的代码将看到
mouseout
事件。为什么会发生这种情况？因为鼠标已移出
span
并进入
strong
元素。然后它会立即看到另一个
mouseover
，因为鼠标正在
strong
元素上移动，
mouseover
事件会在DOM中冒泡，所以我们会在
span
上看到它。当鼠标移入和移出
strong
元素时，这可能会导致闪烁

Internet Explorer有
mouseenter
和
mouseleave
事件，它们更适合您所做的事情-但是谁想使用仅限于一种浏览器品牌的事件呢？好吧，大多数优秀的JavaScript库甚至在本机不支持这些事件的浏览器上模拟这些事件，这让我想到

非主题1：

如果您刚刚开始在浏览器上使用JavaScript，那么有一句话要提醒您：存在大量浏览器不一致和尴尬（如果是这样的话），诸如、、或之类的库可以为您解决这些问题。对于你在这个问题上所做的，恩，它们不会带来巨大的价值。但对于更复杂的事情，它们可以节省你很多时间和麻烦，利用许多其他人在你之前所做的好工作。例如，在不支持鼠标的浏览器上模拟
mouseenter
和
mouseleave
。：-）我知道jQuery和Prototype都是为您这样做的，我想其他人也会这样做

非主题2：

这是“高光”，不是“高光”。如果有人以后需要来维护您的代码，那么这个输入错误（这是一致的，所以不是bug！）很可能会让他们绊倒。另外，标准做法（您可以随意忽略！）是在函数名中使用camelCase字，因此
removeHighlight
而不是
removehightlight
。FWIW.
getElementById
是实际执行它所说内容的调用之一。：-）它通过其
id
属性获取DOM元素。由于
id
必须是唯一的，因此它会为您提供一个特定的元素，然后您可以与之交互（例如，设置其样式属性）

因此，部分问题在于有两个ID为“textspan”的元素和两个ID为“imgsrc”的元素，这意味着浏览器将执行一些未定义的操作，因为

在事件处理程序中，
此
将指向您放在手上的元素