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

Swap and save background color with jquery

本文关键字：背景 颜色 保存 jquery 交换 使用      更新时间：2023-09-26

我有一个菜单，每次悬停链接时，页面的背景颜色都会发生变化。现在，假设我默认的index.html颜色是蓝色，当我悬停在about和contact上时，我会看到黄色和红色。如果我点击关于页面，它的背景颜色将是黄色，如果我将鼠标悬停在主页上，它将返回蓝色。当我把鼠标移回页面时，背景再次变为蓝色，就像我悬停在联系人上一样。

这是我在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的专家，尤其是在条件方面。有人能帮我吗？

谢谢！

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

$(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', '');
  });
});

感谢Joachim，但不幸的是，这并没有奏效。我上传了网站的早期阶段，所以你可以看看bg的问题和行为。http://mircofragomena.com/

正如你在首页上看到的，bg是白色的，但当你悬停时会发生变化。如果你点击pickabrew，你会看到悬停时的页面是黄色的，但如果你再次点击菜单hover/out，页面会回到白色的首页。不过，它应该保持黄色，因为它应该与其他颜色/页面一起出现。

我现在正在使用其他代码

      $(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>

尽管它不起作用。这是一个好的起始代码吗？

相关文章：