如果鼠标进入特定区域，则在 mousemove 上隐藏一个元素

Question

$(document).ready(function() {
  var mx, my, anime = false;
  var e_top = $('.panel-dock').css('top').split('px')[0]
  var e_bottom = $('.panel-dock').css('height').split('px')[0]

  e_top = parseFloat(e_top)
  e_bottom = parseFloat(e_bottom)

  $(document).mousemove(function(e) {
    if (anime) {
      return;
    }
    mx = parseFloat(e.clientX);
    my = parseFloat(e.clientY);

    console.log(my, e_top, e_bottom)


    if (mx <= 80) {
      //if (my >= e_top && my <= e_bottom) {
        anime = true;
        $('.panel-dock').animate({
          left: 0,
        }, 'fast', function() {
          anime = false;
        });
      //}
    } else if (mx > 80) {
      //if (my < e_top && my > e_bottom) {
        anime = true;
        $('.panel-dock').animate({
          left: -60,
        }, 'slow', function() {
          anime = false;
        });
      //}
    }
  });
});

.panel-menu,
.g-tip,
h4,
h5,
p {
  font-family: 'Ubuntu', sans-serif;
  font-size: 11pt;
}

.panel-dock {
  position: fixed;
  top: calc(10em - 20px);
  margin: 0;
  background: #333;
  opacity: 0.9;
  border-radius: 0 6px 6px 0;
  width: 3em;
  height: max-content;
  padding: 0.5em;
  z-index: 1;
  color: white;
  box-shadow: 8px 4px 20px rgba(0, 0, 0, 0.3);
  float: left;
}

@media (max-height: 600px) {
  .gadget-dock {
    position: fixed;
    top: calc(7em - 20px);
  }
}

.panel-dock .panel-menu {
  cursor: pointer;
  width: 100%;
  /* background: transparent; */
  text-align: center;
  z-index: 2;
  padding: 2%;
  letter-spacing: 0.06em;
  margin-bottom: 10%;
  margin-top: 10%;
  border-radius: 3px;
}

.panel-dock .panel-menu:nth-child(n) {
  border: 1px solid transparent;
  border-top: 1px solid #585858;
  border-bottom: 1px solid #585858;
}

.panel-dock .panel-menu:hover {
  background: white;
}

.panel-dock .panel-icons {
  background: -webkit-linear-gradient(250deg, #6da741 40%, #00a489 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 30px;
  height: 30px;
  display: inline-block;
}

.panel-dock .g-icon {
  max-width: auto;
  max-height: 30px;
}

.panel-dock .g-icon i {
  margin-top: 25%;
}

.panel-dock .g-tip {
  position: absolute;
  left: 55px;
  color: #6da741;
  line-height: 1.3;
  min-height: 30px;
  box-shadow: 2px 2px 6px #e0e0e0;
  z-index: 1;
  letter-spacing: 0.006em;
  padding: 5% 5% 0 5%;
  border: 2px solid #eee;
  border-radius: 8%;
  text-align: center;
  width: 125px;
  background: #fff
}

.panel-dock .g-tip h5 {
  display: inline-block;
  text-transform: none;
  text-shadow: 2px 3px 3px #e0e0e0;
  letter-spacing: 0.06em;
  color: #6da741;
}

.panel-dock .g-tip:before {
  content: '';
  position: absolute;
  top: 25%;
  left: -13%;
  border: 8px solid #fff;
  border-left: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
}

.t1 {
  position: absolute;
  top: 15px;
}

.t2 {
  position: absolute;
  top: 50px;
}

.t3 {
  position: absolute;
  top: 85px;
}

.t4 {
  position: absolute;
  top: 120px;
}

.t1,
.t2,
.t3,
.t4 {
  display: none;
}

.tgl {
  left: -80px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="panel-dock" id="g">
  <div class="panel-menu">
    <div class="panel-icons">
      <span class="g-icon tg1"><i class="fa fa-th"></i></span>
    </div>
    <div class="g-tip t1">
      <h5>Library</h5>
    </div>
  </div>
  <div class="panel-menu">
    <div class="panel-icons">
      <span class="g-icon tg2"><i class="fa fa-plus"></i></span>
    </div>
    <div class="g-tip t2">
      <h5>Create a post</h5>
    </div>
  </div>
  <div class="panel-menu">
    <div class="panel-icons">
      <span class="g-icon tg3"><i class="fa fa-bookmark"></i></span>
    </div>
    <div class="g-tip t3">
      <h5>Bookmarks</h5>
    </div>
  </div>
  <div class="panel-menu">
    <div class="panel-icons">
      <span class="g-icon tg4"><i class="fa fa-heart"></i></span>
    </div>
    <div class="g-tip t4">
      <h5>Favorites</h5>
    </div>
  </div>
</div>

当我删除条件 if (my>=e_top && my<=e_bottom) 和 if (my<e_top && my>e_bottom) 时，下面的代码正在运行。而且，如果鼠标进入 mx <= 80 内的任何地方，面板是可见的；否则，它会慢慢隐藏。

如果鼠标在距左侧 80 像素以内且介于面板的起始位置和高度之间，我想显示此面板。

$(document).ready(function() {
    var mx, my, anime = false;
    var e_top = $('.panel').css('top').split('px')[0]
    var e_bottom = $('.panel').css('bottom').split('px')[0]

    $(document).mousemove(function(e) {
        if  (anime) {
            return;
        }
        mx = e.clientX;
        my = e.clientY;

        // console.log(my, e_top, e_bottom)

        if (mx<=80) {
            if (my>=e_top && my<=e_bottom) {
                anime = true;
                $('.panel').animate({
                    left: '0',
                }, 'fast', function () {
                    anime = false;
                });
            }
        } else if (mx > 80) {
            if (my<e_top && my>e_bottom) {
                anime = true;
                $('.panel').animate({
                    left: '-60',
                }, 'slow', function () {
                    anime = false;
                });
            }
        }
    }); 
});

那么，有什么解决办法吗？

Answer 1

你这里有几个问题。首先，您计算的 e_bottom 是错误的。你只看高度，但底部是高度加上顶部，你试图用字符串而不是数字来做到这一点。

var e_top = parseFloat($('.panel-dock').css('top').split('px')[0])
var e_bottom = parseFloat($('.panel-dock').css('height').split('px')[0]) + e_top

更重要的是，您的第二个注释掉了 if 语句：if (my < e_top && my > e_bottom) { 永远不会 return 为真，因为 my 不可能小于顶部且大于底部。它需要是一个 OR。

if (my < e_top || my > e_bottom) {

$(document).ready(function() {
  var mx, my, anime = false;
  var e_top = parseFloat($('.panel-dock').css('top').split('px')[0])
  var e_bottom = parseFloat($('.panel-dock').css('height').split('px')[0]) + e_top

  e_top = parseFloat(e_top)
  e_bottom = parseFloat(e_bottom)

  $(document).mousemove(function(e) {
    if (anime) {
      return;
    }
    mx = parseFloat(e.clientX);
    my = parseFloat(e.clientY);

    console.log(my, e_top, e_bottom)


    if (mx <= 80) {
      if (my >= e_top && my <= e_bottom) {
        anime = true;
        $('.panel-dock').animate({
          left: 0,
        }, 'fast', function() {
          anime = false;
        });
      }
    } else if (mx > 80) {
      if (my < e_top || my > e_bottom) {
        anime = true;
        $('.panel-dock').animate({
          left: -60,
        }, 'slow', function() {
          anime = false;
        });
      }
    }
  });
});

.panel-menu,
.g-tip,
h4,
h5,
p {
  font-family: 'Ubuntu', sans-serif;
  font-size: 11pt;
}

.panel-dock {
  position: fixed;
  top: calc(10em - 20px);
  margin: 0;
  background: #333;
  opacity: 0.9;
  border-radius: 0 6px 6px 0;
  width: 3em;
  height: max-content;
  padding: 0.5em;
  z-index: 1;
  color: white;
  box-shadow: 8px 4px 20px rgba(0, 0, 0, 0.3);
  float: left;
}

@media (max-height: 600px) {
  .gadget-dock {
    position: fixed;
    top: calc(7em - 20px);
  }
}

.panel-dock .panel-menu {
  cursor: pointer;
  width: 100%;
  /* background: transparent; */
  text-align: center;
  z-index: 2;
  padding: 2%;
  letter-spacing: 0.06em;
  margin-bottom: 10%;
  margin-top: 10%;
  border-radius: 3px;
}

.panel-dock .panel-menu:nth-child(n) {
  border: 1px solid transparent;
  border-top: 1px solid #585858;
  border-bottom: 1px solid #585858;
}

.panel-dock .panel-menu:hover {
  background: white;
}

.panel-dock .panel-icons {
  background: -webkit-linear-gradient(250deg, #6da741 40%, #00a489 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 30px;
  height: 30px;
  display: inline-block;
}

.panel-dock .g-icon {
  max-width: auto;
  max-height: 30px;
}

.panel-dock .g-icon i {
  margin-top: 25%;
}

.panel-dock .g-tip {
  position: absolute;
  left: 55px;
  color: #6da741;
  line-height: 1.3;
  min-height: 30px;
  box-shadow: 2px 2px 6px #e0e0e0;
  z-index: 1;
  letter-spacing: 0.006em;
  padding: 5% 5% 0 5%;
  border: 2px solid #eee;
  border-radius: 8%;
  text-align: center;
  width: 125px;
  background: #fff
}

.panel-dock .g-tip h5 {
  display: inline-block;
  text-transform: none;
  text-shadow: 2px 3px 3px #e0e0e0;
  letter-spacing: 0.06em;
  color: #6da741;
}

.panel-dock .g-tip:before {
  content: '';
  position: absolute;
  top: 25%;
  left: -13%;
  border: 8px solid #fff;
  border-left: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
}

.t1 {
  position: absolute;
  top: 15px;
}

.t2 {
  position: absolute;
  top: 50px;
}

.t3 {
  position: absolute;
  top: 85px;
}

.t4 {
  position: absolute;
  top: 120px;
}

.t1,
.t2,
.t3,
.t4 {
  display: none;
}

.tgl {
  left: -80px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="panel-dock" id="g">
  <div class="panel-menu">
    <div class="panel-icons">
      <span class="g-icon tg1"><i class="fa fa-th"></i></span>
    </div>
    <div class="g-tip t1">
      <h5>Library</h5>
    </div>
  </div>
  <div class="panel-menu">
    <div class="panel-icons">
      <span class="g-icon tg2"><i class="fa fa-plus"></i></span>
    </div>
    <div class="g-tip t2">
      <h5>Create a post</h5>
    </div>
  </div>
  <div class="panel-menu">
    <div class="panel-icons">
      <span class="g-icon tg3"><i class="fa fa-bookmark"></i></span>
    </div>
    <div class="g-tip t3">
      <h5>Bookmarks</h5>
    </div>
  </div>
  <div class="panel-menu">
    <div class="panel-icons">
      <span class="g-icon tg4"><i class="fa fa-heart"></i></span>
    </div>
    <div class="g-tip t4">
      <h5>Favorites</h5>
    </div>
  </div>
</div>

如果鼠标进入特定区域，则在 mousemove 上隐藏一个元素

hide an element on mousemove, if mouse enters a particular region

javascript

jquery

mouseevent