Question

我有一个菜单，在其链接的每个悬停中，我的页面的背景颜色都会发生变化。现在，让我们说我的默认index.html颜色是蓝色，当我悬停在约会上并且联系时我有黄色和红色。如果我点击about页面，它的背景颜色将为黄色，如果我将它悬停在家中，它将返回蓝色。当我将mouseOut返回到页面时，背景会再次变为蓝色，如果我在联系中徘徊，那么会发生什么。

这里有我在JS的代码

$(document).ready(function() {
    $('#about').hover(function() {
      $('body').css('background-color', 'yellow');
    }, function() {
      $('body').css('background', '');
    });
    $('#contact').hover(function() {
      $('body').css('background-color', 'red');
    }, function() {
      $('body').css('background', '');
    });

这里有菜单

 <a id="about" href="about.html">about</a>
 <a id="contact" href="contact.html">contact</a>

我认为我应该做一些事情，比如检查当前背景颜色是否与悬停的颜色相匹配，在mouseOut上保留该颜色，否则将其设置为初始颜色。

我不是JS的专家，特别是在条件方面。有人可以帮帮我吗？

谢谢！

Answer 1

如果你希望悬停后颜色保持不变，那么你应该删除hover（）的第二个参数：

$(document).ready(function() {
  $('#about').hover(function() {
    $('body').css('background-color', 'yellow');
  });
  $('#contact').hover(function() {
    $('body').css('background-color', 'red');
  });
});

https://jsfiddle.net/as9jpopd/

**编辑**

如果您希望仅当用户将鼠标移到链接上然后返回时才更改颜色，那么您的代码应该可以正常工作，只有缺少右括号：

$(document).ready(function() {
  $('#about').hover(function() {
    $('body').css('background-color', 'yellow');
  }, function() {
    $('body').css('background', '');
  });
  $('#contact').hover(function() {
    $('body').css('background-color', 'red');
  }, function() {
    $('body').css('background', '');
  });
});

Answer 2

感谢Joachim，但不幸的是，这没有用。我上传了网站的早期阶段，因此您可以查看问题和bg的行为。 http://mircofragomena.com/

正如您在首页上看到的那样，bg是白色的，但是当您悬停更改时。如果你点击pickabrew，你会看到黄色的页面像悬停时一样，但是如果再次进入菜单悬停/退出，页面将以白色作为首页返回。它应该保持黄色，因为它应该与其他每种颜色/页面一起发生。

Answer 3

我现在正在使用其他代码

      $(function() { // Shorthand for $(document).ready(function() {
  var body = $('body');
  var bg = body.css('background-color');
  $('ul.nav a').hover(function() {
              body.css('background-color', $(this).data('bgColor'));
        }, function() {
              body.css('background-color', bg);
        });

}）;

与链接上的这个相关

              <li><a href="../posters/index.html" data-bgColor="#F2C40D">Posters</a></li>

虽然它不起作用。这是一个很好的起始代码吗？

使用jquery交换并保存背景颜色

3 个答案: