如何在鼠标悬停时突出显示不同div中的文本和图像 [英] 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解决方案.我已复制粘贴以下解决方案:

I've found a JavaScript solution on a forum. I've copy-pasted the solution below:

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

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-很好.
在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方面经验很少；曾尝试使用谷歌搜索getElementbyId，但这全都可能是希腊文.

I have very little experience in customising Javascript; have tried Googling getElementbyId but it all might as well be in Greek.

我忘了提到我曾尝试添加一个名为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.

在事件处理程序中，this将指向放置处理程序的元素.因此，在highlight和removeHighlight函数中，可以使用this(而不是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";
}  

...或者您可以在img标记上使用属性(例如data-text)，该属性给出与其链接的文本字段的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及更高版本中，您可以具有自定义属性，只要它们以上述的data-开头即可.因此，如果验证是您的工作实践的一部分(通常是个好主意)，则可以考虑开始使用除非您有特别的理由要使用HTML5文档类型，否则您将不使用HTML5文档类型(例如，对于尚未到达候选推荐阶段的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.

this不是您连接处理程序的方式的元素.我忘了，自从我使用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(space)"上移动时，您会看到系列的 个事件，其中的代码是mouseover当鼠标移到"Gurney"一词时，将看到一个mouseout事件.为什么会这样?因为鼠标已将和的移出到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，那么请注意:诸如原型，关闭，或其他几个都可以为您解决.对于您在此问题中所做的事情，恩，它们不会带来巨大的价值.但是对于更复杂的内容，它们可以利用许多其他人在您之前所做的出色工作为您节省很多时间和麻烦.例如，在不支持它们的浏览器中模拟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 :

这是突出显示"，而不是突出显示".如果有人以后需要维护您的代码，那么该错字(这是一致的，因此不是错误！)很可能会使他们绊倒.另外，标准做法(您可以随意忽略！)是在函数名称中使用驼峰式单词，因此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.

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