我在其中一个网页中有如下代码 -
<li><a href="howto.php" id="howto"><img id="imgHowTo" src="imghowto.png" />HOW TO</a></li>
这是预期的行为 -
将鼠标悬停在列表项上时，图像应更改为 imgHowTo-new.png，并且“HOW TO”文本颜色应更改为绿色（最初为蓝色）。
现在我没有修改 html 或 css 的权限，我必须使用 javascript 实现预期的行为。
我使用了下面的 js 代码 -
document.getElementById("imgHowTo").onmouseover = HoverIn;
function HoverIn(){
newImg = "imgHowTo-new.png"
this.src = newImg;
this.parentNode.style.color = green;
}
现在将鼠标悬停在图标上，图像会发生变化并且文本颜色也会正确更新。但我希望当鼠标悬停在“列表项”上而不是仅在图像/文本上时发生这些更改。我怎样才能在不改变 css/html 的情况下做到这一点？另外，当使用 childNode 访问元素时，如何解决空白（#text）兼容性问题的存在？我需要它在所有浏览器中都能工作。
谢谢！
I have code in one of the webpages as below -
<li><a href="howto.php" id="howto"><img id="imgHowTo" src="imghowto.png" />HOW TO</a></li>
This is the expected behavior -
on hovering the list item, the image should change to imgHowTo-new.png and the "HOW TO" text color should change to green (initially it was blue).
Now I do not have permission to modify the html or the css, and i have to achieve the expected behaviour using javascript.
I used the below js code -
document.getElementById("imgHowTo").onmouseover = HoverIn;
function HoverIn(){
newImg = "imgHowTo-new.png"
this.src = newImg;
this.parentNode.style.color = green;
}
Now on hovering on the icon, the image changes and text color is rightly updated. But I want these changes to happen when mouse hovers on the "list item" and not on the image/ text alone. How can i do this without changing the css/html? Also, how do i account for the presence of whitespace (#text) compatibility issue when childNodes are used to access the elements? I need this to work in all browsers.
thanks!
发布评论
评论（2）
好吧，你可以做这样的事情：（
请注意，我将整个事情放在一个函数中，以避免创建全局变量。）我会担心它是多么脆弱，因为它非常接近与 HTML 结构相关，但它应该适用于您列出的结构。
它的作用是找到
img，然后找到要更改颜色的锚点和要监视鼠标事件的li，然后连接事件。由于您只是在层次结构中向上移动，因此在这种特定情况下您不必担心中间文本节点，尽管这是您在向下移动时经常需要处理的问题/em> 层次结构或跨兄弟姐妹。有点偏离主题，但请注意
mouseover会重复触发，因此您的HoverIn函数将被一遍又一遍地调用。这其实并不重要，因为一旦它完成了它的事情，再次做它是无害的，但仍然......单独地，对于这类事情，它真的值得使用一个好的 JavaScript 库，比如 jQuery, 原型, YUI、关闭或其他任何一个。它们为您消除了许多浏览器差异，提供了帮助您跳过文本节点的工具（您提到过担心这一点），并且通常提供了许多预先构建、预先测试的实用程序，让您可以自由地专注于您的具体工作。
例如，使用（比如说）jQuery，我可能会让代码对 HTML 更改不太敏感（不是很多，但有一些）：
这对小的 HTML 更改稍微更友好，因为它不会不要假设锚点是图像的直接父级，或者列表项是锚点的直接父级。因此，例如，如果有人将锚点包裹在 div 中，它仍然有效。
使用 jQuery、Prototype 或可能其他几个还可以为您提供
mouseenter和mouseleave事件（通常仅适用于 IE，但它们由 jQuery 等库模拟）和其他浏览器上的原型），这对于悬停效果很有用，因为它们不会冒泡。Well, you can do something like this:
(Note that I put the whole thing in a function, to avoid creating global variables.) I'd be concerned by how fragile it is, because it's very closely tied to the HTML structure, but it should work for the structure you've listed.
What that does is find the
img, then find the anchor you want to change the color of and theliyou want to watch for the mouse event on, then hook up the event. Since you're only moving up the hierarchy, you don't have to worry about intermediate text nodes in this specific case, although that is something you frequently have to deal with when moving down the hierarchy or across siblings.Somewhat off-topic, but note that
mouseoverfires repeatedly, so yourHoverInfunction will get called over and over again. That doesn't really matter much because once it's done its thing doing it again is harmless, but still...Separately, for this sort of thing, it's really worth using a good JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. They smooth over a lot of browser differences for you, offer tools to help you skip over text nodes (you mentioned being concerned about that), and just generally provide a lot of pre-built, pre-tested utility stuff that leaves you free to concentrate on your specific work.
For example, using (say) jQuery, I'd probably make the code a little less sensitive to HTML changes (not a lot, but some):
That's slightly more friendly to small HTML changes because it doesn't assume that the anchor is the immediate parent of the image, or that the list item is the immediate parent of the anchor. So if someone wraps the anchor in a div, for instance, it still works.
Using jQuery, Prototype, or probably several of the others also gives you the
mouseenterandmouseleaveevents (which are normally IE-only, but they're emulated by libraries like jQuery and Prototype on other browsers), which are useful for hover effects because they don't bubble.