Question

我有div隐藏的内容，只有当它悬停在另一个div上时才会显示。隐藏的div是一个输入函数，它是对另一个项目的测试;什么都不做，只是为了确保它在功能上有效。

我的代码完成了一半：当您将鼠标悬停在div volume-adjuster上时，带有输入功能的div volume-button可用。

问题在于我无法使用滑块。它可用，但你无法触摸它。

完整代码：

＆＃13;

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <style>
    .volume-contain {
      width: 200px
    }
    
    .volume-adjuster {
      float: left;
      visibility: hidden
    }
    
    .volume-button {
      width: 40px;
      height: 40px;
      float: right
    }
    
    .volume-button .button {
      float: right;
      width: 40px;
      background: black;
      height: 40px
    }
  </style>
</head>

<body>
  <div class="volume-contain">
    <div class="volume-adjuster"><input type="range" min="0" max="15" value="3" id="fader"></div>
    <div class="volume-button">
      <div class="button"></div>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('.volume-button').hover(
        function() {
          $('.volume-adjuster').css({
            "visibility": "visible"
          });
          $('.volume-button').css({
            "width": "200px"
          });
          $('.volume-button').css({
            "margin-top": "-22px"
          });
        },
        function() {
          $('.volume-adjuster').css({
            "visibility": "hidden"
          });
          $('.volume-button').css({
            "width": "40px"
          });
          $('.volume-button').css({
            "margin-top": "0"
          });
        }
      );
    });
  </script>
</body>

＆＃13;

Answer 1

您只需要更改代码中的一些内容（主要是css），然后就可以了。

＆＃13;

$(document).ready(function() {
  $('.volume-button').hover(
    function() {
      $('.volume-adjuster').css({
        "display": "block"
      });

    },
    function() {
      $('.volume-adjuster').css({
        "display": "none"
      });

    }
  );
});

＆＃13;

.volume-contain {
  width: 200px;
}

.volume-adjuster {
  float: left;
  display:none;

}

.volume-button {
  float: right;
  
}

.volume-button .button {
  float: right;
  width: 40px;
  background: black;
  height: 40px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="volume-contain">
 
  <div class="volume-button">
   <div class="volume-adjuster"><input type="range" min="0" max="15" value="3" id="fader"></div>
    <div class="button"></div>
  </div>
</div>

＆＃13;

Answer 2

我建议你将它与父元素上的mouseenter和mouseleave事件绑定，因为z-index需要设置position属性，你可以像这样处理它：

$(document).ready(function() {
  $('.volume-contain').mouseenter(
 function () {
   $('.volume-adjuster').css({"visibility":"visible"});
 }
);
  $('.volume-contain').mouseleave(
  function () {
   $('.volume-adjuster').css({"visibility":"hidden"});
 });
});

CODEPEN DEMO HERE

Answer 3

您的代码不起作用，因为您将NaN元素设置为.volume-button。它将跳过您的输入元素，您无法单击您的输入但仍然可以看到它。 Chiller comment显然是一种解脱。但如果您仍想使用您的代码，您应该做一些小改动：
- 为输入添加悬停功能：

width: 200px

- 在悬停功能中将$('.volume-adjuster').hover(function() { $('.volume-adjuster').css({ "visibility": "visible" }); })元素的宽度更改为100：

.volume-button

您可以看到竞争代码here。

将鼠标悬停在div

3 个答案: