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

Question

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

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

基本上会有一个 div 显示图像（T 恤标志）。在其下方将有一堆彩色按钮。当我将鼠标悬停在这些按钮上时，我希望更改 T 恤 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>

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

Answer 1

首先，给 Div id 名称，例如 "mydiv"

其次，制作按钮悬停事件。放入这个事件

document.getElementById("mydiv").背景=新颜色;

Answer 2

给你的按钮和div一个ID。创建一个 class 代表悬停和默认状态。在按钮的鼠标悬停和鼠标移开时设置每个状态。

根据框架有更优雅的方法，如果您关心维护 classes 不是过渡的一部分，但这是一般的想法：

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 是 parents 还是兄弟姐妹或诸如此类的东西，所以如果你移动代码，它可能会掉落分开。一个更强大的选项可能是这个简单的 jquery 函数，它查找 class 名称并将 T 恤 div 的背景颜色设置为悬停时按钮的背景颜色。

稍微修改 php 代码以添加 trigger_color 的 class:

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 背景？

how do i change a div background when you hover over a button in another div?

javascript

css

onhover

jquery-hover