Скрытые div для каждой ссылки, чтобы показать при наведении - PullRequest
Новая
       51

Скрытые div для каждой ссылки, чтобы показать при наведении

0 голосов
/ 30 октября 2019

У меня есть разные ссылки, по одной на проект, и сразу после него есть скрытый 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;
}

Так как каждый проект имеет свой собственный скрытый-img div сразу после тега, я бы хотел, чтобы div появлялся только тогда, когда предыдущий a был найден.

Ответы [ 2 ]

0 голосов
/ 31 октября 2019

То, чего вы хотите достичь, можно сделать с помощью CSS с помощью оператора sibling (+). Никаких 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>
0 голосов
/ 31 октября 2019

Я внес некоторые изменения. Идентификатор в HTML стал классом, поэтому мы получили .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';

}

}

И я добавил идентификатор для каждой ссылки под названием # project + N (номер 1-12), чтобы я мог определить, на каком NI выполняется наведение, и вызвать его обратно на скрытом div.

Это все равно не сработает, и я знаю, что, конечно, чего-то не хватает, но я не мастер JS.

...