将鼠标悬停在div上时无法调整输入

I have a div that's hidden and can only be shown when it's hovering over another div. The hidden div is an input function that's a test on another project; doesn't do anything, just to make sure it's functionally working.

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

I'm halfway completed with my code: the div volume-adjuster with the input function becomes available when you hover over a div volume-button.

我用我的代码完成了一半：当你将鼠标悬停在div音量按钮上时，带有输入功能的div音量调节器变为可用。

The problem is that I can't work the slider. It available but you can't touch it.

问题是我无法使用滑块。它可用，但你不能触摸它。

Codepen

Full code:

完整代码：

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

3 个解决方案

#1

You just need to change a few things in your code(mainly css) and you are good to go

你只需要改变代码中的一些东西（主要是css）就可以了

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

    },
    function() {
      $('.volume-adjuster').css({
        "display": "none"
      });

    }
  );
});

.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
}

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

#2

I would suggest you to bind this with mouseenter and mouseleave events on parent element as z-index will need position property to be set you can handle it like this :

我建议你将它与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

CODEPEN DEMO在这里

#3

Your code does not work because you set .volume-button element to width: 200px when it is hovered. It will step over your input element and you can not click on your input but you still see it. Chiller comment is a clearly soulution. But if you still want to use your code, you should make some small change like this:
- Add hover function for input:

您的代码不起作用，因为您将.volume-button元素设置为width：200px。它将跳过您的输入元素，您无法单击您的输入，但仍然可以看到它。冷水机评论是一个明显的解决方案。但是如果你仍然想要使用你的代码，你应该做一些小改动： - 为输入添加悬停功能：

$('.volume-adjuster').hover(function() {
    $('.volume-adjuster').css({
      "visibility": "visible"
    });
  })

- Change the width of .volume-button element down to 100 in its hover function:

- 在悬停功能中将.volume-button元素的宽度更改为100：

$('.volume-button').css({
        "width": "100px"
      });

You can see the compele code here.

你可以在这里看到竞争代码。

#1