使用Javascript在鼠標懸停和單擊時切換CSS背景顏色

Question

我一直在使用此腳本在單擊時切換CSS背景顏色，並且一直在嘗試更改它，因此第二種顏色將在懸停時顯示，並且將在單擊時出現。 任何人都可以幫助使它正常工作嗎？

這是我的jsfiddle鏈接：

https://jsfiddle.net/pkrWV/70/

var bodyObj, className, index;

bodyObj = document.getElementById('body');
index = 1;
className = [
    'imageOne',
    'imageTwo',
     'imageThree',
];

function updateIndex(){
    if(index === 0){
        index = 1;
    }else{
        index = 0;
    }
}

bodyObj.onclick = function(e){
    e.currentTarget.className = className[index];
    updateIndex();
}

Answer 1

如果要在懸停時更改顏色，則只需為類定義懸停選擇器。 像這樣 -

#body.imageOne:hover {
   background-color: red;
}

 var bodyObj, className, index; bodyObj = document.getElementById('body'); index = 1; className = [ 'imageOne', 'imageTwo', 'imageThree', ]; function updateIndex() { if (index === 0) { index = 1; } else { index = 0; } } bodyObj.onclick = function(e) { e.currentTarget.className = className[index]; updateIndex(); } 

 html, body, #body { height: 100%; width: 100%; } #body.imageOne { background-color: green; } /*Add this */ #body.imageOne:hover { background-color: red; } #body.imageTwo { background-color: red; } #body.imageThree { background-color: black; } 

 <div id="body" class="imageOne"></div> 

Answer 2

如果要使用javascript更改懸停時的顏色，請添加：

bodyObj.onmouseover = function(e){
    e.currentTarget.className = className[2];
    updateIndex();
}

這是更新的jsfiddle https://jsfiddle.net/pkrWV/82/

如果可能，我建議通過css：hover進行此操作

#body:hover {
  background-color: black;
}

Answer 3

對於鼠標懸停，請使用前面提到的：hover狀態。 捕獲onclick事件以更改CSS的過程很快。 您可以使用：active狀態，該狀態也會很快發生，並且返回時幾乎不會被用戶看到。 ：visited狀態將覆蓋瀏覽器用於以前訪問的鏈接的默認紫色。 盡管將訪問鏈接的狀態從默認狀態更改為其他狀態可能會給您的用戶帶來可用性問題，因為這會給用戶帶來不那么熟悉的狀態。

例如：styles.css

a { 
    color: black; 
}
a:hover {
    color: red;
}
a:active {
    color: gold;
}
a:visited {
    color: purple;
}

Answer 4

我想使用jQuery 2.1.3來做到這一點這是Fiddle鏈接： https : //jsfiddle.net/pkrWV/109

html

<div id="body" class="imageOne">
    <button id="button" onclick="">Change</button>
</div>

js

$("#button").hover(function(){
    $("#body").css("background-color", "red");
});

$("#button").click(function(){
    $("#body").css("background-color", "green");
});

$("#button").mouseout(function(){
    $("#body").css("background-color", "gray");
});

的CSS

html, body, #body {
    height: 100%;
    width: 100%;
}

Answer 5

我以為您正在尋找一種做到這一點的jQuery方法。 首先是黑屏。 小提琴

 $("#color").mouseleave(function() { $("body").css("background-color", "black"); }); $("#color").mouseover(function() { $("body").css("background-color", "red"); }); $("#color").click(function() { $("body").css("background-color", "green"); }); 

 body, #color { height: 800px; width: 800px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div id="color">&nbsp;</div>