1

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

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

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

这似乎有帮助，但对我不起作用 在 CSS 悬停事件中，我可以更改另一个 div 的样式吗？

这是我的代码

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

4

3 回答 3

2

您可以使用 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
      }
    );
});
于 2015-05-02T23:14:06.300 回答
1

首先，给 div id 名称，如“mydiv”

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

document.getElementById("mydiv").background = 新颜色；

于 2015-05-02T23:00:40.183 回答
1

给你的按钮和 div 一个 ID。创建一个代表悬停和默认状态的类。在您的按钮的 mouseover 和 mouseout 上设置每个状态。

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

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";
   };
};
于 2015-05-02T23:03:32.170 回答