Question

这是功能

function getColor() {

  var color = '';

    $('.animated-teaser.cold').hover(
    function() {
      $(this).addClass('active');
      color = 'coldest';
      return color;
    },
    function() {
      $(this).removeClass('active');
      color = '';
      return color;
    }
  );

  $('.animated-teaser.warm').hover(
    function() {
     $(this).addClass('active');
      color = 'warmest';
      return color;
    },
    function() {
      $(this).removeClass('active');
      color = '';
      return color;
    }
  );
}

那我叫它

$('.area').css('background-color', getColor());

我看到它可以正常工作，但是结果不会影响“ .area”元素。

我不想在“ .area”元素中添加事件！

这里是jsfiddle

Answer 1

正如我在评论中所说，getColor函数将悬停的侦听器附加到DOM元素。这就是全部。它不返回颜色。当前，您期望此函数从将来尚未发生的事件（用户将鼠标悬停在一个元素上）返回一种颜色。逻辑有缺陷，您需要重新考虑它。首先，附加悬停的侦听器。然后，在悬停时，更改区域颜色。

const $area = $('.area'),
  $cold = $('.animated-teaser.cold'),
  $warm = $('.animated-teaser.warm');

$cold.hover(function() {
  $cold.addClass('active');
  changeAreaColor('coldest');
}, function() {
  $cold.removeClass('active');
  changeAreaColor('');
});

$warm.hover(function() {
  $warm.addClass('active');
  changeAreaColor('warmest');
}, function() {
  $warm.removeClass('active');
  changeAreaColor('');
});
}

function changeAreaColor(color) {
  $area.css('background-color', color)
}

话虽这么说，"warmest"是无效的CSS颜色，所以它不会做任何事情。将其更改为“深红色”或something official。

Answer 2

应该绑定到悬停事件，而不是一次性更新，即

$('.area.animated-teaser.cold').hover(
    function() {
      $(this).addClass('active');
      color = 'coldest';
      return color;
    },
    function() {
      $(this).removeClass('active');
      color = '';
      return color;
    }
);

Answer 3

您的JS有缺陷的原因有很多，其中最主要的原因是在将事件处理程序附加到旨在返回颜色值的函数中的语义，该函数本身不返回值。

但是，考虑到您的HTML，您根本不需要JS。通过使用“通用”同级选择器（~）和:hover，您可以在CSS中更有效地做到这一点。

还要注意，coldest和warmest对于background-color规则不是有效的选项。您需要使用公认的颜色名称或值。在以下示例中，我使用了lightblue和coral。试试这个：

.animated-teaser {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.animated-teaser:hover {
  border: 2px solid red;
}

.animated-teaser.cold {
  background: blue;
}

.animated-teaser.warm {
  background: orange;
}

.animated-teaser.cold:hover ~ .area {
  background-color: lightblue;
}

.animated-teaser.warm:hover ~ .area {
  background-color: coral;
}

.area {
  display: block;
  width: 200px;
  height: 100px;
  background: #f1f1f1;
}

<div class="animated-teaser cold"></div>
<div class="animated-teaser warm"></div>
<div class="area"></div>

Answer 4

只需将这两行放在CSS中。不需要JavaScript即可完成此简单任务

.cold:hover ~ .area {
    background: blue
}
.warm:hover ~ .area {
    background: orange
}

根据函数的返回值动态更改div的背景

4 个答案: