Скрыть всплывающее окно при отъезде мыши - PullRequest
Новая
       61

Скрыть всплывающее окно при отъезде мыши

0 голосов
/ 05 августа 2020

Я пытаюсь добавить всплывающее окно при наведении курсора мыши. В каждой строке есть несколько td, и всплывающее окно должно работать только с первым. Это работает, пока курсор мыши находится в том же столбце. То есть, если я перемещаю мышь вверх и вниз, всплывающее окно появляется и исчезает, как ожидалось. Но если я перемещаю мышь по горизонтали в следующий тд, всплывающее окно не исчезает. Я создал для этого jsfiddle , но всплывающее окно не работает. Консоль сообщает, что функция javascript не определена, но здесь она работает нормально, поэтому у меня что-то не так в настройке jsfiddle. Вот код, который я использую. Td используются, потому что это код, который мне дали. Может ли кто-нибудь увидеть, что нужно, чтобы всплывающее окно скрывалось независимо от того, как двигалась мышь?

EDITED, чтобы решить проблему. 

    <style>
    #pop-description{
      display              : none;
      position             : absolute;
      z-index              : 99999;
      left                 : 0px;
      padding              : 10px;
      background           : #3AB9AE;
      border               : 1px solid #9a9a9a;
      margin               : 0px;
    }
    </style>

    <script>
    $(document).ready(function(){
    function ShowDescription(id) { 
     var position = $('.class-desc-'+id).position();
     var desc = $('#desc-'+id).val();
     $('#pop-description').css('top', position.top);
     $('#pop-description').text(desc);
     //$('#pop-description').toggle();

     $('.class-desc-'+id).mouseenter(function() {
       $('#pop-description').css('display', 'block');

     }).mouseleave(function() {
       $('#pop-description').css('display', 'none');
     });  
    }
    });
    </script>

    <div style="display:relative;"><div id="pop-description" style="display:none;"></div></div>
    <table>
    <tr>
    <td class="class-desc-0" onmouseOver="ShowDescription('0');">title</td>
    <td>Address</td>
    <td>State</td>
    <input type="hidden" name="desc-0" value="first test" id="desc-0">
    </tr>

    <tr>
    <td class="class-desc-1" onmouseOver="ShowDescription('1');">title</td>
    <td>Address</td>
    <td>State</td>
    <input type="hidden" name="desc-1" value="second test" id="desc-1">
    </tr>

    <tr>
    <td class="class-desc-2" onmouseOver="ShowDescription('2');">title</td>
    <td>Address</td>
    <td>State</td>
    <input type="hidden" name="desc-2" value="third test" id="desc-2">
    </tr>
    </table>

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Я думаю, вы слишком много думаете об этом. Вот что бы я сделал. Я бы использовал jQuery, как показано ниже.

  1. Запустить нужное действие на mouseenter
  2. Начать противоположное действие на mouseleave

$(function() {

  $(".toggle").mouseenter(function() {
    // Your code goes below: initiate first action
    $(this).addClass("showOff");

  }).mouseleave(function() {

    // Your code goes below: Initiate opposite action
    $(".toggle").removeClass("showOff");

  });

});
div {
  cursor: pointer;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  transition: all 2s;
}

.showOff {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: orange;
  transition: all 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">Hove over me</div>

Примечание: В вашем случае вы показываете всплывающее окно на mouseenter и скрываете его на mouseleave

0 голосов
/ 05 августа 2020

Почему бы просто не использовать наведение? Как 

class-desc:hover .popup{
   display: block;
}
...