1

我想达到在以下网站上找到的相同效果：

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

1 回答 1

5

getElementById是实际执行它所说的那些调用之一。:-) 它通过其id属性获取一个 DOM 元素。由于id必须是唯一的，它会为您提供一个特定元素，然后您可以与之交互（例如，设置其样式属性）。

所以你的问题的一部分是你有两个 ID 为“textspan”的元素，以及两个 ID 为“imgsrc”的元素，这意味着浏览器会做一些未定义的事情，因为你不能这样做。

在事件处理程序中，this将指向您放置处理程序的元素。因此，在您的highlightandremoveHighlight函数中，您可以使用this(而不是getElementById) 来获取对imgDOM 元素的引用。那只剩下文本了。

您可以使用命名约定（例如“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-上述开头即可。因此，如果验证是您工作实践的一部分（这通常是一个好主意），您可能会考虑开始使用 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属性更改为：

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

这是一个活生生的例子。

旁注：您找到的代码正在使用mouseoverandmouseout事件。请注意，它们并没有完全按照您的预期去做，并且可能会咬到您，尽管您使用它们的具体方式大多都很好（您做的工作比必要的多，但这没关系）。但是假设您的标记发生了一些变化：

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

现在，您正在观看这些事件的跨度中有一个元素。这意味着当用户的鼠标从左到右移动时，当鼠标移动到文本“11（空格）”上时，您会看到一系列事件，然后您的代码将在鼠标移动时看到一个事件“轮床”一词。为什么会这样？因为鼠标已经移出并移入元素。然后它会立即看到另一个，因为鼠标在元素上移动并且事件在 DOM 中冒泡，所以我们在. 当鼠标移入和移出元素时，这可能会导致闪烁。mouseovermouseoutspanstrongmouseoverstrongmouseoverspanstrong

Internet Explorer 具有mouseenter和mouseleave事件，它们更适合您正在做的事情——但谁愿意使用仅限于一种浏览器品牌的事件？好吧，即使在原生不支持它们的浏览器上，大多数优秀的 JavaScript 库也会模拟这些事件，这让我...

题外话1：

如果您刚开始在浏览器上使用 JavaScript，请注意： jQuery、Prototype、YUI、Closure或其他任何库可以平滑浏览器的许多不一致和尴尬（如果这是一个词）为你结束。对于您在这个问题中所做的事情，嗯，它们不会带来巨大的价值。但是对于更复杂的事情，它们可以为您节省大量时间和麻烦，利用许多其他人在您之前完成的出色工作。例如，在不支持它们的浏览器上模拟mouseenter和。mouseleave:-) 我知道 jQuery 和 Prototype 都会为您做到这一点，我怀疑其他人也会这样做。

题外话2：

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

于 2010-12-28T09:37:21.320 回答