javascript - 绝对位置下方的悬停效果

Question

我的问题中包含三个标签。

1. 围绕我的图像并相对定位的包装器 div。
2. 绝对定位的锚标记，宽度和高度为 100%。这样，用户可以单击图像上的任意位置以转到其 url，或者能够右键单击并在新选项卡中打开。
3. 最后是图像标签。

我的目标是在用户将鼠标悬停在图像上时为图像添加效果。正如您在onmousover警报属性中看到的那样，唯一的问题是当您悬停图像时，只会触发悬停在锚标记上。所以我猜我需要以某种方式将我的 onmouseover 传播到图像上？我很茫然，任何帮助将不胜感激。哦，请避免使用任何框架（jquery、原型），请只使用 js 和 css。非常感谢。

<div class="boardPostImage">
    <a href="image?id=${image.id}" class="boardPostImageAnchor"></a>
    <img alt="${boardPost.content}" src="${initParam.imageCropMedium}${image.id}.jpg" onmouseover="alert('hello')" />
</div>

Answer 1

如果您坚持将锚点与图像分开，则可以。

JavaScript 解决方案：

function HoverOverImage()
{
    alert("Hello");
}

function HoverOverAnchor()
{
   //Do the stuff you want
   //Execute the other function
   HoverOverImage();
}

<a href="image?id=${image.id}" class="boardPostImageAnchor" onmouseover="HoverOverAnchor()"></a>

jQuery解决方案：

$("img").mouseover(function(){
        alert("Hello");
});

$("a").mouseover(function(){
        $("img").mouseover();
});