悬停效果低于绝对位置

Hover Effect Below Position Absolute

本文关键字：位置 于绝 悬停      更新时间：2023-09-26

我的问题包含三个标签。

  1. 一个包装器div，围绕我的图像，并相对定位。
  2. 锚定标签，宽度和高度均为100%。这样，用户可以点击图像上的任何地方去它的url，或者有能力右键单击并打开一个新的选项卡。
  3. 最后是图像标签。

我的目标是当用户将鼠标悬停在图像上时为图像添加效果。正如您在onmousover alert属性中看到的那样，唯一的问题是，当您悬停在图像上时，只有悬停在锚标记上才会触发。所以我猜我需要把onmouseover传递到图像上?我不知道该怎么做，如果能得到任何帮助，我将不胜感激。哦，请避免使用任何框架(jquery, prototype)，请只使用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>

如果您坚持将锚点与图像分开，那么就可以了。

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();
});
相关文章：