滚动时如何与元素交互

How to interact with elements when rollover?

本文关键字：元素 交互 滚动      更新时间：2023-09-26

我试图创建一个可扩展的滚动，但要与里面的元素交互。这里有一个可扩展的div，当它被扩展时，另一个div显示为"x"。我想要的是当我点击#wrap进入谷歌，当我点击#按钮进入雅虎。你怎么看，现在如果我超过了"x"，我就会离开#wrap区域，变成mouseout。知道怎么解决这个问题吗？

https://jsfiddle.net/Ln6q9q9b/

<script>
$(document).ready(function() {
  $("#wrap").hover(
    //on mouseover
    function() {
      $(this).animate({height: '+=250'}, 'slow');
      $('#button').css('display', 'block');
      expanded = true;
      console.log("expanded is " + expanded);
    },
    //on mouseout
    function() {
      $(this).animate({height: '-=250px'}, 'slow');
      $("#button").hide();
      expanded = false;
      console.log("expanded is " + expanded);
    }
  );
  $('#wrap').on('click', function(){
    window.open('http://google.com', 'click', 'window settings');
    return false;
    console.log('click');
  });
  if(expanded = true){
    $("#button").on('click', function(){
        window.open('http://yahoo.com', 'click', 'window settings');
        return false;
      });
  };
});
</script> 
<style type="text/css">
#wrap{
  width: 900px;
  height:50px;
  overflow:hidden;
  background: black;
}
#button{
  position: absolute;
  color: white;
  left: 10;
  top: 10;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
</style>
<body>
<div id="wrap">
</div>
<div id="button">X</div>
</body>

在wrap中添加按钮。

并将position: relative;赋予wrap.

https://jsfiddle.net/afelixj/Ln6q9q9b/1/

不能100%确定你想要实现什么，但请查看relatedTarget。

对于mouseout，表示正在输入的元素；对于鼠标悬停，指示正在退出的元素。

对于您的mouseout听众，您可以添加

function (evt) {
    if(evt.relatedTarget.id === "button") return;
    $(this).animate({height: '-=250px'}, 'slow');
    //etc;
}

以下内容似乎适用于

$(document).ready(function() {
  var expanded = false;
  $("#wrap").hover(
    //on mouseover
    function() {
      if (expanded) { return; }
      $(this).animate({height: '+=250'}, 'slow');
      $('#button').css('display', 'block');
      expanded = true;
      console.log("expanded is " + expanded);
    },
    //on mouseout
    function(evt) {
      if (evt.relatedTarget.id === "button") { return; }
      $(this).animate({height: '-=250px'}, 'slow');
      $("#button").hide();
      expanded = false;
      console.log("expanded is " + expanded);
    }
  );
  $('#wrap').on('click', function(){
    window.open('http://google.com', 'click', 'window settings');
    return false;
    console.log('click');
  });
  $("#button").on('click', function(evt){
      window.open('http://yahoo.com', 'click', 'window settings');
      return false;
  });
});

我还将if (expanded) { return; }添加到了mouseover侦听器中，并完全删除了if (expanded = true)检查。

如果我理解得对，您所需要做的就是将#按钮放在#wrapdiv中。

<div id="wrap"><div id="button">X</div></div>

让其余的保持不变，它似乎可以随心所欲地工作。

相关文章：