使用jQuery將鼠標懸停時更改多個div背景顏色

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一般兄弟選擇這樣做~了。 這是一個例子：

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

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

有關更多信息，請參見此處 。

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

演示

---

或者，如果只需要將這三種顏色（ 紅色 ， 綠色和橙色 ）應用於其他框，則可以使用以下方法：

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

演示

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