Скрытый div не отображается при наведении курсора через jQuery - PullRequest
Новая
       45

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

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

У меня есть ссылка, и при наведении на нее я хотел бы показать div, все через jQuery, чтобы расположить элемент с помощью currentMousePos, но ничего не происходит.

Я пытался объявитькласс div, который должен получить currentMousePos.

Вот jQuery: 

var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
    $(".hidden-img").css('top', currentMousePos.y);
    $(".hidden-img").css('left', currentMousePos.x);
});

Это CSS: 

.list-item > div.hidden-img {
    display: none;
    height:300px;
    width:290px;
    margin-left:10px;
    position: absolute;
    z-index:-20;
}

.list-item > a:hover + .list-item > div.hidden-img {
    display: block; 
}

И этоHTML: 

<li class="list-item">
    <a class="project-title">Text to hover</a>
     <div class="hidden-img">
      <img src='a-project-called/kremer/1.png'>
     </div>
</li>

Я бы хотел, чтобы div hidden-img отображался при наведении курсора на название проекта.

Спасибо!

1 Ответ

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

В настоящее время вы управляете режимом отображения hiddenDiv с помощью довольно сложных CSS-селекторов. Хотя кто-то другой может предложить вам солютон на основе CSS, я думаю, что более элегантное решение - вместо этого использовать javascript для переключения режима отображения.

Вызывая функцию для переключения отображения hiddenDiv в onmouseenterи onmouseout события управляющего HTML-элемента, вы можете создать поведение при наведении, которое вы ищете: 

//takes in an ID, finds element using that ID, then toggles that
//  element's display between block and none
function toggleHiddenDisplay(id){
  elem = document.getElementById(id)
  if(elem.style.display == 'none'){
    elem.style.display = 'block';
  }else elem.style.display = 'none';
}
<html>
  <div>
    <a onmouseenter=toggleHiddenDisplay('hiddenDiv')
       onmouseout=toggleHiddenDisplay('hiddenDiv')>
       Text to Hover
    </a>
    <div id="hiddenDiv" 
       style="color:white; background-color:red; display:none;">
       Hidden Content
    </div>
  </div>
</html>

Итак, теперь у вас есть два компонента:

  1. Настройка на основе Javascript / html-событий для переключения режима отображения при наведении
  2. Jquery-скрипт, который устанавливает позицию элементов на основе текущей позиции курсора.

Эти два могут быть объединены, чтобы дать вам комбинацию переключения + отображение при желаемом поведении мыши: 

var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
    $(".hidden-img").css('top', currentMousePos.y);
    $(".hidden-img").css('left', currentMousePos.x);
});

function toggleHiddenDisplay(id){
  elem = document.getElementById(id)
  if(elem.style.display == 'none'){
    elem.style.display = 'block';
  }else elem.style.display = 'none';
}
.list-item > div.hidden-img {
    display: none;
    height:300px;
    width:290px;
    margin-left:10px;
    position: absolute;
    z-index:-20;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="list-item">
    <a class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Text to hover</a>
     <div class="hidden-img" id="hoverDisplay" style="display:none;">
      <img src='https://www.gravatar.com/avatar/fe56d599fb9eeafdde6be4b369d51512?s=328&d=identicon&r=PG&f=1'>
     </div>
</li>
...