使用 jquery 悬停时更改多个 div 背景颜色答案

【问题标题】：change multiple div background color when on hover using jquery使用 jquery 悬停时更改多个 div 背景颜色
【发布时间】：2015-03-06 16:05:03
【问题描述】：

我有 4 个蓝色 div 框，结构类似平铺。当鼠标悬停在使用 jquery 的一个框上时，我想更改其他 3 个的颜色。这段代码似乎没有完成这项工作。任何帮助将不胜感激！

<div class="box" style=" height: 150px; width: 150px; border:5px solid black"></div>
<div class="box" style="height: 150px; width: 150px; border:5px solid black"></div>
<div class="box" style="height: 150px; width: 150px; border:5px solid black"></div>
<div class="box" style="height: 150px; width: 150px; border:5px solid black"></div>

$(document).ready((function () {
    $(".box1").mouseover(function () {
        $(".box2").css("background-color", "red");
        $(".box3").css("background-color", "green");
        $(".box4").css("background-color", "orange");
    });
});

【问题讨论】：

您的 jQuery 中有几个拼写错误。检查您的控制台是否有错误。工作示例jsfiddle.net/j08691/xk3ke75e
请同时发布相关的 HTML
你打算如何为每个剩余的盒子分配颜色，相同的颜色，或随机的不同颜色？而且，您是否只想将鼠标悬停在一个盒子上，即 box1
您的代码是正确的，在 ready 方法打开后您有一个错字。你有 2 个括号。
@j08691 做得很好，我觉得操作可能也希望在鼠标悬停时反转这种效果，所以我在这里有一个更新的小提琴：jsfiddle.net/nvrtfsod

标签： javascript jquery html

【解决方案1】：

您也可以使用 CSS General Sibling Selector ~ 来做到这一点。这是一个例子：

.box {
    display: inline-block;
    width: 70px;
    height: 70px;
    border: 1px solid;
}
.box1:hover ~ .box2 {
    background: red;
}
.box1:hover ~ .box3 {
    background: green;
}
.box1:hover ~ .box4 {
    background: blue;
}

<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
<div class="box box4">Box 4</div>

【讨论】：

很高兴为您提供帮助。 :)
但我想使用 jquery 而不是 css 来完成它
好的。这只是一种替代方法。看来你已经用 jQuery 得到了答案。

【解决方案2】：

您可以在每个 div 上使用单个 .box 类，在每个 div 的 data 属性中设置颜色并在 hover 上抓取它

HTML：

<div data-color="grey" class="box"></div>
<div data-color="red" class="box"></div>
<div data-color="green" class="box"></div>
<div data-color="orange" class="box"></div>

jQuery:

$(document).ready(function () {
    $(".box").hover(function () {
        // change hovered div background to yellow:
        $(this).css("background-color", 'yellow');
        // loop through the rest of the divs with the same class:
        $(".box").not(this).each(function(){
            // change their background color according to their 'data-color' attribute:
            $(this).css("background-color", $(this).data('color'));
        });
       // set hover out method:
    }, function(){
        // change each 'box' background color to default:
        $(".box").css("background-color", '');
    });
});

DEMO

或者，如果您需要仅应用这 3 种颜色（red、green 和 orange）到其他盒子，你可以使用这样的东西：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

$(".box").hover(function () {
    $(this).css("background-color", 'yellow');
    $(".box").not(this).each(function(i){
        $(this).css("background-color", (['red','green','orange'])[i]);
    });
}, function(){
    $(".box").css("background-color", '');
});

DEMO

【讨论】：

感谢您的帮助，我尝试了两种方法，但任何 div 框的颜色都没有变化。我的每个 div 框的 html 看起来像这样----------------------------- ------------------------------
@D00ble ，您是否在页面中包含了 jQuery 库？它确实有效Here
是的，我已将其链接到我的 html 页面，并按原样复制并粘贴了您的代码，保存并刷新了浏览器......没有效果
@D00ble ，那么问题出在其他地方。如果没有看到其余的代码和 HTML，很难说出它可能在哪里。
终于明白了。我没有在我的标题标签中首先链接我的 jquery 库。显然它必须是第一个链接文件。再次感谢您的帮助！

【解决方案3】：

试试这个

$(document).ready(function () {
    $(".box1").mouseover(function () {
        $(".box2").css("background-color", "red");
        $(".box3").css("background-color", "green");
        $(".box4").css("background-color", "orange");
    });
});

【讨论】：

请解释一下你做了什么。
$(document).ready((function (){ 而不是这个我把 $(document).ready(function (){

【解决方案4】：

我为你快速完成了这个，希望这是你需要的CodePen

$(".box").hover(function () {
            $(".box").css("background", "red");
            $(".box1").css("background", "green");
    },function(){
            $(".box, .box1").css("background", "#262626");
});

【讨论】：

【解决方案5】：

也可以试试这个：您可以使用.hover 并删除ready((function () { 中的双括号

$(document).ready(function () {
    $(".box1").hover(function () {
        $(".box2").css("background-color", "red");
        $(".box3").css("background-color", "green");
        $(".box4").css("background-color", "orange");
    });
});

更多信息，相关here。

【讨论】：

【解决方案6】：

我已经创建了这段代码，我想它会对你有所帮助，

HTML

<div class="box box1" id="box1"></div>
<div class="box box2" id="box2"></div>
<div class="box box3" id="box3"></div>
<div class="box box4" id="box4"></div>

CSS

.box {
  width : 100px;
  height : 100px;
  border : 1px solid gray;
}
.yellow {
  background : yellow;
}
.red {
  background : red;
}
.green {
  background : green;
}
.orange {
  background : orange;
}

jQuery

$(document).ready(function () {

    var colorArray = ['red', 'green', 'orange'];

    function assignRandomBackgroundToElement(element, color) {
         element.addClass(color);
    }

    function assignRandomBackgroundToRemainingElements(remainingBoxIndexes, elementArray) {
      remainingBoxIndexes.forEach(function(ele, index) {
         assignRandomBackgroundToElement($(elementArray[ele]), colorArray[index]);
      });
    }
    $(".box").mouseover(function () {
        var element = $(this);
        element.addClass('yellow');
        var totalBoxes = $(".box").length;
        var currentIndex = 0;
        var remainingBoxIndexes = [];
        $(".box").each(function(index, ele){
          if($(ele).attr('id')===element.attr('id')) {
            currentIndex = index;
          } else {
            remainingBoxIndexes.push(index);
          }
        });
        assignRandomBackgroundToRemainingElements(remainingBoxIndexes, $(".box"));

    });

  $(".box").mouseout(function () {
        $(".box").removeClass('red green orange yellow');     
  });
});

【讨论】：