Question

我一直在使用此脚本在点击时切换CSS背景颜色，并且我一直在尝试更改它，因此第二种颜色将在悬停时显示，并且会在点击时显示。任何人都可以帮忙解决这个问题吗？

这是我的jsfiddle链接：

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

如果您希望在悬停时更改颜色，则只需为您的班级定义hover选择器。像这样 -

#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 add：

更改悬停时的颜色

function timer(){

    var timer;

    for(i=100;i>=0;i--){

        timer = i.toString() + "%";

        setTimeout(function({$('#innerBar').css("width", timer)}, ((100-i)*1000));

    }
}

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

我建议通过css执行此操作：如果可能，请悬停

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

Answer 3

对于鼠标过度使用：如前所述的悬停状态。捕获onclick事件以更改CSS很快就会发生。您可以使用：活动状态，它也很快发生并返回，用户几乎看不到。：visited状态将覆盖用于以前访问过的链接的浏览器默认紫色。虽然将访问链接的状态更改为默认值可能会给用户带来可用性问题，因为它会为他们提供不太熟悉的状态。

Ex：styles.css

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

Answer 4

我可以使用jQuery 2.1.3来做这件事这是小提琴链接：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方式。这是一个空白屏幕。 fiddle

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

使用Javascript在悬停和单击时切换CSS背景颜色

5 个答案: