切换CSS背景颜色悬停和点击使用Javascript

Switch CSS background colour on hover and on click using Javascript

本文关键字：Javascript CSS 背景 颜色 悬停 切换      更新时间：2023-09-26

我一直在使用这个脚本切换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();
}

如果你想在悬停时改变颜色，你只需要为你的类定义悬停选择器。像这样- 

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

如果你想使用javascript改变鼠标悬停的颜色，添加:

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

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

如果可能的话，我建议使用css:hover 

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

对于鼠标悬停使用:如前所述的悬停状态。捕获onclick事件来改变CSS发生得很快。您可以使用:active状态，这种状态发生得非常快，并且返回时用户几乎看不到。已访问的状态将覆盖浏览器默认的紫色，它们使用以前访问过的链接。虽然改变访问链接的默认状态可能会给用户带来可用性问题，因为它会给他们带来一种不太熟悉的状态。

例:styles

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

我设法使用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%;
}

我以为你正在寻找一种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>

相关文章：