javascript - 如何在鼠标悬停时突出显示不同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”的元素，这意味着浏览器将执行未定义的操作，因为you can't do that。

在事件处理程序中，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";
}  

...或者您可以在data-text标记上使用属性（例如img），该属性给出与其链接的文本字段的ID；您可以从DOM元素获取如下属性：

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

自定义属性在HTML4及以下版本中无效，但我从未遇到过出现问题的浏览器。在HTML5及更高版本中，您可以具有自定义属性，只要它们以上述的data-开头即可。因此，如果validation是您的工作实践的一部分（通常是个好主意），则可以考虑开始使用HTML5 doctype，除非您有特殊的理由要保留前一个（例如，例如，对于尚未到达候选推荐阶段的HTML5版本使用文档类型感到不舒服）。我们很多人都是happy enough to go ahead now。

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属性更改为：

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

这是live example。

旁注：您找到的代码正在使用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 ，或any of several others可以帮助您解决问题。对于您在此问题中所做的事情，恩，它们不会带来巨大的价值。但是对于更复杂的东西，它们可以利用许多其他人在您之前所做的出色工作为您节省大量时间和麻烦。例如，在不支持它们的浏览器中模拟mouseenter和mouseleave。 :-)我知道jQuery和Prototype都能为您做到这一点，我怀疑其他人也能做到。

离题2：

这是“突出显示”，而不是“突出显示”。如果有人以后需要维护您的代码，那么该错字（这是一致的，因此不是错误！）可能会使他们绊倒。另外，标准做法（您可以随意忽略！）是在函数名称中使用驼峰式单词，因此removeHighlight而不是removehightlight。 FWIW。