наведите курсор на элемент гнезда, используя jquery - PullRequest
Новая
       31

наведите курсор на элемент гнезда, используя jquery

0 голосов
/ 10 мая 2019

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

Я хочу получать предупреждающее сообщение, когда моя мышь включает / выключает тег «a» (link2 / link3 .....).К сожалению, моя попытка не удалась.

(function() {
    $(document).ready(function() {
          $('#links').hover(function() {
              alert("mouse is 
                pointing ")},function(){ alert("
                mouse is not pointing ")})
              })
          })()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div id="links">
    <h1><a>link1</a></h1>
    <div><h2><a> link2</a></h2></div>
    <div><h2><a> link3</a></h2></div>
    <div><h2><a> link4</a></h2></div>
    <div><h2><a> link5</a></h2></div>
    <div><h2><a> link6</a></h2></div>
    <div><h2><a> link7</a></h2></div>
  </div>
</body>

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Ваша HTML и Javascript структура была нарушена. Исправлено в приведенном ниже фрагменте.

Внесены следующие изменения для исправления вашего кода:

  • В вашем HTML я изменил </body> на </div>
  • В вашем javascript добавлено ; и исправлена ​​структура.
  • Добавлен элемент a в ваш селектор элементов, чтобы выбрать все элементы a в #links

Внесены следующие изменения для улучшения кода:

  • Изменено alert() на console.log() для более плавной отладки.
  • Изменен устаревший $(document).ready(function(){}) на рекомендуемый $(function(){})

(function() {
  $(function(){
    $('#links a').hover(
      function() {
        console.log("mouse is pointing ");
      },function(){ 
        console.log("mouse is not pointing ");
      }
    );
  });
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div id="links">
    <h1><a>link1</a></h1>
    <div>
      <h2><a> link2</a></h2>
    </div>
    <div>
      <h2><a> link3</a></h2>
    </div>
    <div>
      <h2><a> link4</a></h2>
    </div>
    <div>
      <h2><a> link5</a></h2>
    </div>
    <div>
      <h2><a> link6</a></h2>
    </div>
    <div>
      <h2><a> link7</a></h2>
    </div>
  </div>
</div>
0 голосов
/ 10 мая 2019

Ваш выбор разметки неверен.Используйте find a внутри div, как показано ниже. 

(function() {
  $('#links').find('a').hover(
    function() {
      console.log("mouse is pointing ");
    },
    function() {
      console.log("mouse is not pointing ");
    }
  );
})()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div id="links">
    <h1><a>link1</a></h1>
    <div>
      <h2><a> link2</a></h2>
    </div>
    <div>
      <h2><a> link3</a></h2>
    </div>
    <div>
      <h2><a> link4</a></h2>
    </div>
    <div>
      <h2><a> link5</a></h2>
    </div>
    <div>
      <h2><a> link6</a></h2>
    </div>
    <div>
      <h2><a> link7</a></h2>
    </div>
  </div>
...