Question

当您将鼠标悬停在另一个div中的按钮上时，如何更改div背景？

您好，正如我所提到的，当我将鼠标悬停在其下方的按钮上时，我需要更改div的背景颜色。

基本上会有一个显示图像的div（一个T恤标志）。下面会有一堆彩色的按钮。当我将鼠标悬停在这些按钮上时，我希望tshirt div的背景能够改变。我正在度过最艰难的时光。我对javascript或css开放。

这似乎有帮助，但对我不起作用 On a CSS hover event, can I change another div's styling?

这是我的代码

<!DOCTYPE html>
<html>
    <head>
      <style>

        body {
          background:grey;
        }
        
        #shirt {
          display: block;
        }
        
        #thumbnail1 {
          display: block;
        }
        
        #thumbnail1:hover {
          background:white;
        }

        #thumbnail1:hover > #shirt {
          background:green;
        }

        input[type="button"] {
          width: 9.090%;
          height: 4.090%;
          display:block;
          float:left;
          background:red;
        }
      </style>
    </head>
    <body>
      <section>
        <div align="center">
          <img style=" margin-left:10px;float:left; background:grey;" src="http://www.dudermang.com/cfaulk/3pigs.gif" width="95"/>
          <div align="center" id="shirt">
            <img style="float:none" src="http://www.dudermang.com/cfaulk/3pigs.png" alt="wpf" width="760"/>
            <img style="float:right; background:grey;"src="http://www.dudermang.com/cfaulk/3pigs.gif" width="95"/>
          </div>
        </div>

        <div style="padding-top:40px;">
          <?php
            echo'<div id="thumbnail1"><input type="button" style="background:#002B7A"/></div>';
            echo'<div id="#thumbnail2"><input type="button" style="background:#42B4E6"/></div>';
            echo'<div id="#thumbnail3"><input type="button" style="background:#D2D6D9"/></div>';
            echo'<div id="#thumbnail4"><input type="button"style="background:#A8A8AA"/></div>';
            echo'<div id="#thumbnail5"><input type="button"style="background:#F27EB2"/></div>';
            echo'<div id="#thumbnail6"><input type="button"style="background:black"/></div>';
            echo'<div id="#thumbnail7"><input type="button"style="background:#474747"/></div>';
            echo'<div id="#thumbnail8"><input type="button"style="background:#FE4812"/></div>';
            echo'<div id="#thumbnail9"><input type="button"style="background:#7C2230"/></div>';
            echo'<div id="#thumbnail10"><input type="button"style="background:#54565B"/></div>';

            echo'<div id="#thumbnail11"><input type="button"style="background:#54565B"/></div>';
            echo'<div id="#thumbnail12"><input type="button"style="background:#5C4A3B"/></div>';
            echo'<div id="#thumbnail13"><input type="button"style="background:#B2BC00"/></div>';
            echo'<div id="#thumbnail14"><input type="button"style="background:#EBBECB"/></div>';
            echo'<div id="#thumbnail15"><input type="button"style="background:#6241"/></div>';
            echo'<div id="#thumbnail16"><input type="button"style="background:#5E8AB4"/></div>';
            echo'<div id="#thumbnail17"><input type="button"style="background:#892034"/></div>';
            echo'<div id="#thumbnail18"><input type="button"style="background:#AA1054"/></div>';
            echo'<div id="#thumbnail19"><input type="button"style="background:#2D1B46"/></div>';
            echo'<div id="#thumbnail20"><input type="button"style="background:#3B5E75"/></div>';


            echo'<div id="#thumbnail21"><input type="button"style="background:#CC092F"/></div>';
            echo'<div id="#thumbnail22"><input type="button"style="background:#18453B"/></div>';
            echo'<div id="#thumbnail23"><input type="button"style="background:#FFB300"/></div>';
            echo'<div id="#thumbnail24"><input type="button"style="background:#253355"/></div>';
            echo'<div id="#thumbnail25"><input type="button"style="background:#007E3A"/></div>';
            echo'<div id="#thumbnail26"><input type="button"style="background:#A59D87"/></div>';
            echo'<div id="#thumbnail27"><input type="button"style="background:#55BE47"/></div>';
            echo'<div id="#thumbnail28"><input type="button"style="background:#8CB4E8"/></div>';
            echo'<div id="#thumbnail29"><input type="button"style="background:#4E2029"/></div>';
            echo'<div id="#thumbnail30"><input type="button"style="background:#3A4C00"/></div>';

            echo'<div id="#thumbnail31"><input type="button"style="background:#F3ECE6"/></div>';
            echo'<div id="#thumbnail32"><input type="button"style="background:#A3D869"/></div>';
            echo'<div id="#thumbnail33"><input type="button"style="background:#FF1CAC"/></div>';
            echo'<div id="#thumbnail34"><input type="button"style="background:#E9E73F"/></div>';
            echo'<div id="#thumbnail35"><input type="button"style="background:#D5C4A1"/></div>';
            echo'<div id="#thumbnail36"><input type="button"style="background:#FF9C71"/></div>';
            echo'<div id="#thumbnail37"><input type="button"style="background:#38B8FF"/></div>';
            echo'<div id="#thumbnail38"><input type="button"style="background:#502D7F"/></div>';
            echo'<div id="#thumbnail39"><input type="button"style="background:#FF585E"/></div>';
            echo'<div id="#thumbnail40"><input type="button"style="background:#006F44"/></div>';

            echo'<div id="#thumbnail41"><input type="button"style="background:#D00063"/></div>';
            echo'<div id="#thumbnail42"><input type="button"style="background:#7566A0"/></div>';
            echo'<div id="#thumbnail43"><input type="button"style="background:#385E9D"/></div>';
            echo'<div id="#thumbnail44"><input type="button"style="background:#1D4F91"/></div>';
            echo'<div id="#thumbnail45"><input type="button"style="background:#948771"/></div>';
            echo'<div id="#thumbnail46"><input type="button"style="background:#E8FF6B"/></div>';
            echo'<div id="#thumbnail47"><input type="button"style="background:#FF6C3B"/></div>';
            echo'<div id="#thumbnail48"><input type="button"style="background:#89A386"/></div>';
            echo'<div id="#thumbnail49"><input type="button"style="background:#47C7C7"/></div>';
            echo'<div id="#thumbnail50"><input type="button"style="background:#D4D4E0"/></div>';

            echo'<div id="#thumbnail51"><input type="button"style="background:#FF7900"/></div>';
            echo'<div id="#thumbnail52"><input type="button"style="background:#A7192D"/></div>';
            echo'<div id="#thumbnail53"><input type="button"style="background:#FFFFFF"/></div>';
            echo'<div id="#thumbnail54"><input type="button"style="background:#5E2751"/></div>';
            echo'<div id="#thumbnail55"><input type="button"style="background:#FFE000"/></div>';
          ?>
        </div>
      </section>
    </body>
  </html>

＆＃13;

//get the array of items (you will want to update) from the session variable
$old_items = \Session::get('items');

//create a new array item with the index or key of the item 
//you will want to update, and make the changes you want to  
//make on the old item array index.
//In this case I referred to the index or key as quantity to be
//a bit explicit
$new_item[$quantity] = $old_items[$quantity] - 1;

//merge the new array with the old one to make the necessary update
\Session::put('items',array_merge($old_items,$new_item));

＆＃13;

Answer 1

首先，将Div ID名称改为“mydiv”

第二，制作一个按钮悬停事件。放入此活动

document.getElementById（“mydiv”）。background = new color;

Answer 2

给你的按钮和div一个ID。创建一个表示悬停和默认状态的类。在鼠标悬停和鼠标按钮上设置每个状态。

依赖于框架有更优雅的方式，如果你关心维护类不是转换的一部分，但这是一般的想法：

window.onload = function() {
   var div = document.getElementById("your-div-id-here"),
       btn = document.getElementById("your-btn-id-here");

   btn.onmouseover = function(e) {
      div.class = "over-class-name";
   };
   btn.onmouseout = function(e) {
      div.class = "default-class-name";
   };
};

Answer 3

你可以用CSS做到这一点，但是你需要知道div是父母还是兄弟姐妹等等，所以如果你移动代码它可能会崩溃。一个更健壮的选项可以是这个简单的jquery函数，它查找一个类名并将tshirt div的背景颜色设置为与悬停时按钮的背景颜色相同。

稍微更改php代码以添加一类trigger_color：

echo'<div class="trigger_color" id="thumbnail1"><input type="button" style="background:#002B7A"/></div>';

并在某处坚持这个jQuery函数：

$(document).ready(function(){
    $( ".trigger_color" ).hover(
      function() {
         $("#shirt").css("background-color", $("input", this).css("background-color"));
      }, function() {
          $("#shirt").css("background-color", "gray"); //back to normal
      }
    );
});

当您将鼠标悬停在另一个div中的按钮上时，如何更改div背景？

3 个答案: