Question

当我将鼠标移到div #overlay上时，我想打开div opacity: 1 #header。同样重要的是，#header必须保持相对，这样才不会影响到这一点。

我尝试使用jQuery（下面的代码）执行此操作，但是它根本不起作用。

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Overlay Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $("#header").hover(function(){
            $("#overlay").fadeTo(200, 1);
        }, function(){
            $("#overlay").fadeTo(200, 0, function(){
                $(this).hide();
            });
        });
    </script>
    <style>
    body {
        padding: 0;
        margin: 0;
        font-family: Arial, Helvetica;
        font-size: 1rem;
        color: #7a7a7a;
    }
    #header {
        padding: 20px 60px;
        position:relative;
        height:auto;
        width: auto;
        background: #f6f6f6;
        text-align: center;
        z-index: 10;
    }
    #content {
        padding: 60px;
        text-align: center;
        z-index: 1;
        background: #D1D1D1;
        width: auto;
        height: auto;
    }
    #overlay {
        background: rgba(0, 0, 0, 0.5);
        opacity:0;
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        width: 100%;
        z-index: 5;

    </style>
</head>

    <body>
<div id="header">
  <h1>Header menu area</h1>
</div>
<div id="content"><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3></div>
<div id="overlay"></div>
</body>
</html>

JSFiddle：https://jsfiddle.net/tuuni/o5pLuvr1/2/

这是我希望将鼠标移到标题上方的样子：

Answer 1

无论是JSFiddle还是问题中包含的代码都行不通，但是由于不同的原因它们不行。 JSFiddle不起作用，因为您尚未包括jQuery库。但是否则，它应该起作用。但是，让我们关注您提供的代码。让我们看一下您的代码，忽略不相关的部分。

<!DOCTYPE html>
<html>
  <head>
    <!-- Other Tags -->
    <script>
      $("#header").hover(
        function() {
          $("#overlay").fadeTo(200, 1);
        },
        function() {
          $("#overlay").fadeTo(200, 0, function() {
            $(this).hide();
          });
        }
      );
    </script>
    <!-- Other Tags -->
  </head>
  <body>
    <div id="header">
      <h1>Header menu area</h1>
    </div>
    <div id="content">
      <h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </h3>
    </div>
    <div id="overlay"></div>
  </body>
</html>

$("#header", ...)在DOM中创建正文中的内容之前运行，因此悬停事件侦听器无法附加到任何内容。您可以通过将它们全部包装在$(document).ready()调用中来解决此问题，如下所示。在附加悬停事件侦听器之前，这将等待在DOM中创建主体。您可以read more at the jQuery docs site。

$(document).ready(function() {
  $("#header").hover(
    function() {
      $("#overlay").fadeTo(200, 1);
    },
    function() {
      $("#overlay").fadeTo(200, 0, function() {
        $(this).hide();
      });
    }
  );
});

在mousehover上打开div的不透明度

1 个答案: