鼠标事件触发但未执行功能

Mouse event firing but not performing function

本文关键字：执行 功能 事件 鼠标      更新时间：2023-09-26

我正在尝试使用由带有类.box的框组成的网格制作一个简单的绘图程序。我希望通过改变不透明度，盒子在鼠标的每次通过时逐渐变暗。

   $('.box').mouseenter(function() {
      var currentOp = parseInt($(this).css('opacity'));
      $(this).css('opacity', currrentOp + .1);
   });

该事件触发一次并将不透明度从 0 更改为 .1，但随后不会继续增加后续鼠标传递的不透明度。

我能够使用以下代码获得所需的结果：

   $('.box').mouseenter(function() {
       $(this).css('opacity', '+=1');
   });

谁能告诉我为什么我的第一次尝试不起作用？这是一个包含整个代码的 JSFiddle。谢谢！

在您的情况下，parseInt()的结果始终是整数 0。您想改用parseFloat()。

改变：

var curOp = parseInt($(this).css('opacity'), 10);

自：

var curOp = parseFloat($(this).css('opacity'), 10);

演示

你使用 parseFloat，因为如果 parseInt（ 0.1 ） === 0

$('.box').mouseover(function () {
    var curOp = **parseFloat**($(this).css('opacity'), 10);
    $(this).css('opacity', curOp + 0.1);
});

;)（Y）

相关文章：