html - 通过单击切换背景颜色

Question

这似乎应该很容易，但我真的找不到办法。

动画 http://doir.ir/css.gif

当您单击这些相应的链接时，我需要更改和转换页面的背景颜色。我见过的最接近触发这种转换的事情是：

通过演示仅使用 html5 和 css3 更改正文背景颜色

这是非常接近的，但这仅在鼠标悬停在链接上时才有效。我尝试将 :hover 的伪选择器替换为可以想象的所有内容，但单击链接后没有任何“粘滞”。

基本上，我有一个链接列表，当您单击任何链接时，它会播放不同的歌曲（通过 html5 ）。我希望背景根据当前正在播放的歌曲进行转换。如果需要，我可以使用 javascript 或 jquery。有什么建议吗？

Answer 1

这个怎么样？http://jsfiddle.net/u6PPn/2/

关键部分是 jQuery：

$(".color").click(function() {
    var color = $(this).text();
    $("body").animate({ backgroundColor:color},1000);
});

HTML：

<div class="color">Red</div>
<div class="color">Green</div>
<div class="color">Blue</div>

这样您就可以设置n颜色。

Answer 2

我有一个非常多样化的解决方案给你！

顺便说一句：感谢您的巨大挑战：p

<button value="black" class="black btn">Black</button>
<button value="red" class="red btn">Red</button>
<button value="brown" class="brown btn">Brown</button>
<button value="orange" class="orange btn">Orange</button>
<button value="mediumSeaGreen" class="green btn">MediumSeaGreen</button>

CSS

body {
  -webkit-transition: .6s ease;
  -moz-transition: .6s ease;
  -ms-transition: .6s ease;
  -o-transition: .6s ease;
}

jQuery

$('.btn').on('click', function() {
   var valColor = $(this).val();

   $('body').css({
       background: valColor        
   });
});

JSFIDDLE

Answer 3

在按钮单击时更改颜色（具有过渡效果）的纯Javascript解决方案：

function changecolor(){

var x = document.getElementsByClassName("initialstate");

x[0].className="finalstate";



}

.initialstate{

  background: red;
  
  padding: 10px;
  
  
  
}

.finalstate {
 background: cyan;
 transition: background-color 2s ease;
 
 padding: 10px; 


}

<div class="initialstate">Hello </div>

<button onclick='changecolor()'>Click to change color </button>