每个链接的隐藏 div 以在悬停时显示答案

【问题标题】：Hidden divs per each link to show on hover每个链接的隐藏 div 以在悬停时显示
【发布时间】：2019-10-30 13:02:17
【问题描述】：

我有不同的链接，每个项目一个，紧随其后的是一个隐藏的 div，当相关链接悬停时必须出现。你可以看到它在这里不起作用http://mircofragomena.com/WIP，但它可以给你一个想法。底部的每个链接（项目）都有一个隐藏的 div，每个链接都包含项目的图像。现在只有第一个项目显示了正确的图像，而其他任何一个都没有。

这是JS

$(document).ready(function() {

    $(".list-item").mousemove(function(e) {
        var offset = $(".list-item").offset();
        $("#hoverDisplay").animate({
            left: e.pageX - offset.left,
            top: e.pageY - offset.top
        }, 1);
    });
});

function toggleHiddenDisplay(id) {
    elem = document.getElementById('hoverDisplay')
    if (elem.style.display == 'block') {
        elem.style.display = 'none';
    } else elem.style.display = 'block';
}

第一部分跟随鼠标位置，以便 div 图像卡在指针上，而第二部分应该使 div 在悬停时出现/消失..

这是 HTML：

<a href="project/index.html" class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Text.</a>
<div class="hidden-img" id="hoverDisplay" style="display:none;">
<img src='path/1.gif'>
</div>

这是 CSS，虽然我认为不是很有用：

#hoverDisplay {
    margin-top: 5px;
    margin-left: 5px;
    position: absolute;
}

.list-item>div.hidden-img {
    display: none;
    height: 500px;
    width: 350px;
    position: absolute;
    z-index: 10;
}

由于每个项目在 a 标签之后都有自己的 hidden-img div，我希望 div 在前一个 a 悬停时出现。

【问题讨论】：

标签： jquery html image hover hidden

【解决方案1】：

我做了一些改变.. HTML中的ID变成了一个类，所以我们现在有了.hoverDisplay

我现在尝试使用此代码来识别生成 onmouseenter 事件的目标

 $(document).ready(function() {

$(".list-item").mousemove(function(e) {

var offset = $(".list-item").offset();

$(".hoverDisplay").animate({

left: e.pageX - offset.left,

top: e.pageY - offset.top

}, 1);

});

});

function toggleHiddenDisplay(id) {

var target = $(ev.target);

var elId = target.attr('id');

if (target.is(".project-title")) {

elem = document.getElementByClass('hoverDisplay')

if (elem.style.display == 'block') {

elem.style.display = 'none';

} else elem.style.display = 'block';

}

}

我为每个链接添加了一个 ID，称为 #project+N（数字 1-12），以便我可以检测到我在哪个 N 上进行悬停，并在隐藏的 div 上触发它。

它仍然不起作用，我知道肯定缺少某些东西，但我不是 JS 大师。

【讨论】：

【解决方案2】：

您想要完成的事情可以通过 CSS 使用兄弟 (+) 运算符来完成。不需要 jquery 或 javascript。

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

下面的例子：

.hidden-img {
  display: none;
}

a:hover+div {
  display: block !important;
  position: absolute;
  top: 30px;
}

<a href="#" class="project-title">proj 1</a>
<div class="hidden-img">
  <img src='https://fakeimg.pl/250x100/?text=project1'>
</div>

<a href="#" class="project-title">proj 2</a>
<div class="hidden-img">
  <img src='https://fakeimg.pl/250x100/?text=project2'>
</div>

<a href="#" class="project-title">proj 3</a>
<div class="hidden-img">
  <img src='https://fakeimg.pl/250x100/?text=project3'>
</div>

【讨论】：