Question

我目前有很多代码，所以手动执行此操作是不可行的，但是当任何元素悬停时，我需要缩放它的大小。显然，使用css并不难，但是当子元素悬停时，我遇到了一些问题，父元素悬停状态仍然存在。因此，如果孩子徘徊，父母和孩子都会被扩大。使用jquery对特定的子节点和父节点来说并不难，但是不可能为每个父元素和子元素编写代码。

我要问的是，是否有一种方法可以使用jquery使其在任何元素上如此悬停它添加css但是当鼠标悬停时会移除父悬停效果。因此，如果孩子被盘旋，父母悬停效果将被删除。 Adblock就是这样做的。 gif解释了我的意思 - https://gyazo.com/c9348ba943cace723e569e4ace69dd62

Answer 1

此代码创造了奇迹

    <!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript">
      //function parameters do not have types?
      function calculateAge(birthYear, currentYear)
      {
        var page = document.getElementById("content");
        var content = page.innerHTML;
        var age = currentYear-birthYear;
        var stage;
        if (age <18)
        {
          stage = "Teenager";
        }
        else if (age >= 18 || age <= 35)
        {
          stage = "Adult";
        }
        else
        {
          stage = "Mature Adult";
        }
        var outputMessage = "Your stage is: " + stage + ".\n" + "Your age is: " + age + ".";
        page.insertBefore(outputMessage, page.firstChild);
      }
      //  var input = document.getElementById('submit');
      //  input.addEventListener('click', calculateAge);
      //  var form = document.getElementById('input');
      //  form.onsubmit = function()
      //  {
      //    calculateAge ()
      //  }
      var button = document.getElementById("submit");
      button.onclick = function()
      {
        value1 = button.form.box1.value;
        value2 = button.form.box2.value;
        calculateAge(value1, value2);
      }
    </script>
  </head>
  <body>
      <div class="basic">
        <form id="input">
            <p class="content">
              <label> Birth Year: <input type="text" id="box1"></label> <br></br>
              <label> Current Year: <input type="text" id="box2"></label> <br></br>
              <input type="button" value="Calculate" id="submit" onclick="calculateAge(document.getElementById('box1').value, document.getElementById('box2'.value))"/>
            </p>
           </form>
      </div>
  </body>
</html>

致https://stackoverflow.com/a/32492163/6677578

的信用

Jquery悬停孩子，否定父母悬停效果

1 个答案: