使用jquery将鼠标悬停在嵌套元素上

Question

我正在努力将鼠标悬停在非常内在的元素上。我已经在这个问题上研究了很长时间，但是仍然对如何解决这个问题一无所知。到目前为止，下面的代码是我已经完成的事情。

当我的鼠标悬停在“ a”标签（link2 / link3 .....）上时，我希望收到一条警报消息。不幸的是，我的尝试没有成功。

Express

(function() {
    $(document).ready(function() {
          $('#links').hover(function() {
              alert("mouse is 
                pointing ")},function(){ alert("
                mouse is not pointing ")})
              })
          })()

Answer 1

您的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>

Answer 2

您的标记选择错误。如下所示，在div中使用find a。

(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>