Question

我希望能够创建一个按钮，当它悬停在上面时，会改变我网站的背景颜色。

我不知道如何尝试这一点，并且正在寻找人们可以给予的任何帮助。

当您将鼠标悬停在社交图标上时，您可以看到我在nowthisnews.com网站的桌面版本上尝试复制的效果。

由于

Answer 1

你可以这样做

＆＃13;

function bgChange(x) {
    document.body.style.background = x;
}

＆＃13;

   

ul li{
  color:#fff;
  list-style-type:none;
  padding:2px;
  margin:7px;
}
ul li a{
color:#fff;
  padding:5px;
  }

＆＃13;

<ul>
    <li><a href="" onmouseover="bgChange(this.style.backgroundColor)" style="background:red;">Red</a></li>
    <li><a href="" onmouseover="bgChange(this.style.backgroundColor)" style="background:green;">Green</a></li>
    <li><a href="" onmouseover="bgChange(this.style.backgroundColor)" style="background:blue;">Blue</a></li>
    <li><a href="" onmouseover="bgChange(this.style.backgroundColor)"
           style="background:yellow;">yellow</a></li>
 </ul>

＆＃13;

Answer 2

您可以使用jquery

执行此操作

$(document).ready(function () {
  $('.column-1').mouseover(function() {
    $('.mask-1').css("background-color", "#061981");
     ......

 });
}

本质上是一个鼠标悬停（函数...在你想要observ的区域上...执行css背景颜色的变化与正确的div相关（在这种情况下是div类mask-1）

您可以在检查浏览器提供的代码时使用firebugs轻松检查代码

Answer 3

您可以简单地使用jquery来设置背景css的样式。只需确保页面中包含jquery文件，并使用元素id

修改下面的代码

$('#button-name').hover(function(){
     $('#background-name').css('background-color':'red'); 
});

将鼠标悬停在按钮上时更改背景颜色

3 个答案: