Question

我有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");
    });
});

Answer 1

您也可以使用 CSS General Sibling Selector ~ 执行此操作。这是一个例子：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

试试这个

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

Answer 3

我为你做得很快，希望这是你需要的CodePen

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

Answer 4

另请尝试以下操作：您可以使用.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 。

Answer 5

您可以在每个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种颜色（红色，绿色和橙色）对于其他框，你可以使用这样的东西：

<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

Answer 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');     
  });
});

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

6 个答案: