Javascript新手：如何在鼠标悬停时突出显示不同div中的文本和图像 [英] Javascript Newbie: How to highlight text and image in different divs on mouseover

问题描述

我希望在以下网站上获得相同的效果：

I would like to achieve the same effect found on the following website:

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

鼠标悬停时一个图像，相应的文本突出显示，反之亦然。

On mouseover of an image, the corresponding text highlights and vice versa.

我在论坛上找到了一个Javascript解决方案。因为我的帖子中不能包含2个超链接，所以我复制粘贴了以下解决方案：

I've found a Javascript solution on a forum. Because I can't include 2 hyperlinks in my post, I've copy-pasted the solution below:

div code

<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中，如下所示：

However, this solution is for an image and text in the same div. My image and text reside in two separate divs like so:

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。

Let's call 11 Gurney Drive - Text1 and 11-gurney-drive.jpg - Image1
78 LAD - Text2 and 78-lad.jpeg - Image2.

我的问题：

在Text1鼠标悬停时，它突出显示Text1和Image1 - Good。

在Text2鼠标悬停时，它突出显示Text2和Image1 - 它应突出显示Text2和Image2。

在Image1鼠标悬停时，它仅突出显示Image1 - 它应突出显示Text1和Image1。

在Image2鼠标悬停时，它仅突出显示Image1 - 它应突出显示Text2和Image2。

On Text1 mouseover, it highlights both Text1 and Image1 - Good.
On Text2 mouseover, it highlights Text2 and Image1 - it should highlight Text2 and Image2.
On Image1 mouseover, it highlights only Image1 - it should highlight Text1 and Image1.
On Image2 mouseover, it highlights only Image1 - it should highlight Text2 and Image2.

我在定制Javascript方面经验不足;尝试过Googling getElementbyId，但这一切都可能是希腊语。真的希望有人能帮我解决这个问题。

I have very little experience in customising Javascript; have tried Googling getElementbyId but it all might as well be in Greek. Really hoping somebody here could help me out with this one urgently.

非常感谢你。

//编辑

我忘了提到我已经尝试添加名为textspan2和imgsrc2的第二个唯一元素ID但这似乎不起作用。我做了什么：

I forgot to mention that I've tried adding a 2nd unique element ID called textspan2 and imgsrc2 but that didn't seem to work. What I did:

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>

推荐答案

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

getElementById is one of those calls that actually does what it says. :-) It gets a DOM element by its id attribute. Since id must be unique, it gets you one specific element that you can then interact with (for instance, setting its style properties).

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

So part of your problem is that you have two elements with the ID "textspan", and two elements with the ID "imgsrc", which means the browser will do something undefined because you can't do that.

在事件处理程序中，此将指向您放置处理程序的元素。因此，在您的突出显示和 removeHighlight 函数中，您可以使用此（而不是 getElementById ）获取对 img DOM元素的引用。只留下文本。

Within an event handler, this will point to the element that you've put the handler on. So in your highlight and removeHighlight functions, you can use this (rather than getElementById) to get a reference to the img DOM elements. That just leaves the text ones.

你可以使用命名约定（例如textspan1和imgsrc1，textspan2和imgsrc2），所以处理程序看起来像这样：

You could use a naming convention ("textspan1" and "imgsrc1", "textspan2" and "imgsrc2" for instance), so the handlers would look like this:

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元素中获取一个属性：

...or you might use an attribute (say, data-text) on the img tags that gives the ID of the text field linked to it; you can get an attribute from a DOM element like this:

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

自定义属性在HTML4及以下版本无效，但我从未遇到过有问题的浏览器跟他们。在HTML5及更高版本中，您可以拥有自定义属性，只要它们以数据 - 开头，如上所述。因此，如果验证是您工作实践的一部分（并且通常是个好主意），您可以考虑开始使用HTML5 doctype，除非你有特别的理由留在前一个（例如，你对使用HTML5版本的文档类型感到不舒服，甚至还没有达到候选推荐阶段）。我们很多人很高兴现在开始。

Custom attributes are invalid in HTML4 and below, but I've never met a browser that had a problem with them. In HTML5 and above, you can have custom attributes as long as they start with data- as above. So if validation is part of your working practices (and it's usually a good idea), you might consider starting to use the HTML5 doctype unless you have a particular reason for staying with the previous one (like, for instance, you're uncomfortable using a doctype for a version of HTML5 that hasn't even reached candidate recommendation stage yet). A lot of us are happy enough to go ahead now.

这个不是你连接处理程序的方式。我忘记了，自从我使用DOM0方法连接处理程序（ onmouseover = ）以来，已经很久了。但下面的工作原理：

this is not the element the way you're hooking up the handlers. I'd forgotten, it's been a long time since I used the DOM0 way of hooking up handlers (onmouseover=). But the below works:

或，因为您附加处理程序的方式，您可以将参数传递给函数告诉他们他们正在处理哪一个：

Or, because of the way you're attaching the handlers, you could pass an argument into the functions telling them which one they're dealing with:

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

...where your onmouseover and onmouseout attributes changes to:

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

这是实例。

旁注：您找到的代码是使用 mouseover 和 mouseout 事件。请注意，那些完全做了你可能期望他们做的事情，并且它可以咬你，虽然你使用它们的具体方式大部分都很好（你做的工作多于必要的，但没关系。但是假设您的标记稍有变化：

Side note: The code you've found is using the mouseover and mouseout events. Be aware that those don't quite do what you may expect they do, and it can bite you, although the specific way you're using them is mostly fine (you're doing more work than necessary, but that's okay). But suppose your markup changed a little:

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

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

Now there's an element within the span that you're watching those events on. That means that as the user's mouse travels from left-to-right, you'll see a series of mouseover events as the mouse travels over the text "11(space)", then your code will see a mouseout event as the mouse moves over into the word "Gurney". Why does this happen? Because the mouse has moved out of the span and into the strong element. Then it will immediately see another mouseover, because the mouse is moving over the strong element and the mouseover event bubbles up the DOM, so we see it on the span. This may cause flicker as the mouse moves into and out of the strong element.

Internet Explorer具有 mouseenter 和 mouseleave 事件，更适合你正在做的事情 —但是谁想要使用仅限于一个品牌浏览器的活动？好吧，大多数优秀的JavaScript库甚至在本机不支持它们的浏览器上模拟这些事件，这让我感到... ...

Internet Explorer has the mouseenter and mouseleave events, which are more suited to what you're doing — but who wants to use events that are limited to only one brand of browser? Well, most good JavaScript libraries emulate these events even on browsers that don't support them natively, which brings me to...

非主题1 ：

如果您刚开始在浏览器上使用JavaScript，请注意：有许多浏览器不一致和尴尬（如果这是一个单词） ）像 jQuery ， Prototype ， YUI ，关闭，或其他几个人可以顺利过来。对于你在这个问题上所做的事情，恩，他们不会带来巨大的价值。但是对于更复杂的东西，它们可以为你节省时间和麻烦，并利用许多其他人在你之前做的好工作。例如，在不支持它们的浏览器上模拟 mouseenter 和 mouseleave 。 :-)我知道jQuery和Prototype都为你做了这件事，我怀疑其他人也这样做。

If you're just starting out with JavaScript on browsers, a word of warning: There are a number of browser inconsistencies and awkwardnesses (if that's a word) that libraries like jQuery, Prototype, YUI, Closure, or any of several others can smooth over for you. For what you're doing in this question, enh, they wouldn't bring a huge amount of value. But for more complicated stuff, they can save you a lot of time and trouble, leveraging the good work many others have done before you. Like, for instance, emulating mouseenter and mouseleave on browsers that don't support them. :-) I know for a fact both jQuery and Prototype do that for you, and I suspect others do as well.

非主题2 ：

这是突出显示，而不是高亮。如果有人需要在以后维护您的代码，那个错字（这是一致的，所以不是错误！）可能会让他们绊倒。另外，标准练习（您可以自由忽略！）是函数名称中的camelCase单词，因此 removeHighlight 而不是 removehightlight 。 FWIW。

It's "highlight", not "hightlight". If someone needs to come maintain your code later, that typo (which is consistent, and so not a bug!) might well trip them up. Separately, the standard practice (which you're free to ignore!) is to camelCase words in function names, so removeHighlight rather than removehightlight. FWIW.

这篇关于Javascript新手：如何在鼠标悬停时突出显示不同div中的文本和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！