Question

我的mouseenter和mouseleave有问题。我已经在堆栈上查找了一些示例，但是没有找到任何有用的东西。我假设我必须做两个函数或者只是重构为一个。无论哪种方式任何帮助表示赞赏。我已经在html元素本身声明了50px的高度和宽度。如果你需要我更具体的酷。我不是javascript的专业人士，所以不要因为我没注意到什么而感到沮丧。如果我只是向我解释，所以我知道将来参考。谢谢！

＆＃13;

var modWidth;
$('#icons a img').on('mouseenter', function(){
  $(this).width(modWidth);
  $(this).height(modWidth);
  var modWidth = 75;
});


$('#icons a img').on('mouseleave', function(){
  $(this).width(modWidth);
  $(this).height(modWidth);
  var modWidth = 50;
});

＆＃13;

Answer 1

您只需要声明modWidth一次，然后在使用之前需要将数字设置为modWidth，请参阅小提琴https://jsfiddle.net/kvb5hb6f/1/

  var modWidth;

  $('#demo').on('mouseenter', function() {
    modWidth = 75;
    $(this).width(modWidth);
    $(this).height(modWidth);
  });

  $('#demo').on('mouseleave', function() {
    modWidth = 50;
    $(this).width(modWidth);
    $(this).height(modWidth);
  });

Answer 2

问题是你通过在每个函数内部创建一个新变量来阴影 modWidth变量。例如：

var myName = 'Mike';
function bob() {
  var myName = 'Bob';
  console.log('My name is ' + myName);
}

bob();
// Notice that `bob` does not overwrite the original `myName`
// It created a new `myName` in it's own scope
console.log('My name is ' + myName);

为避免这种情况，只需声明modWidth一次。

var modWidth;
$('#icons a img').on('mouseenter', function() {
  $(this).width(modWidth);
  $(this).height(modWidth);
  modWidth = 50; // Notice that I removed `var`
});


$('#icons a img').on('mouseleave', function() {
  $(this).width(modWidth);
  $(this).height(modWidth);
  modWidth = 75; // Notice that I removed `var`
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="icons">
  <a href="#">
    <img src="https://placehold.it/50x50">
  </a>
</div>

mouseenter工作，mouseleave没有

2 个答案: