Question

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

一个包装div，围绕我的图像并相对定位。
绝对定位的锚标记，宽度和高度均为100％。这样，用户可以单击图像上的任意位置以转到其URL，或者可以右键单击并在新选项卡中打开。
最后是图片标记。

我的目标是在用户将鼠标悬停在图像上时为图像添加效果。正如您在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();
});

悬停效果低于绝对位置

1 个答案: