1

How do I change a div background when you hover over a button in another div?

Hello, as I mentioned, I need to changed the background color of a div when i hover over a button below it.

Basically there will be a div that shows an image(a tshirt logo). Below that there will be a bunch of buttons that are colored. When I hover over these buttons I would like the background of the tshirt div to change. I am having the hardest time with this. I am open to javascript or css.

This seemed helpful but did not work for me On a CSS hover event, can I change another div's styling?

Here is my code

<!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>
Community
  • 1
  • 1
cfaulk
  • 51
  • 1
  • 2
  • 11

3 Answers3

2

You could do this with CSS but you'd need to know if the divs were parents or siblings or whatnot so if you move the code around it could fall apart. A more robust option could be this simple jquery function which looks for a classname and sets the tshirt div's background colour the same as the button's background colour on hover.

Slightly alter the php code to add a class of trigger_color:

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

and stick this jQuery function somewhere:

$(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
      }
    );
});
TechnicalChaos
  • 452
  • 3
  • 21
  • Wow 2 other equally similar and accurate answers while I was typing up this one. – TechnicalChaos May 02 '15 at 23:15
  • Oh, be aware with my code you'll need to include jquery as well.`` – TechnicalChaos May 02 '15 at 23:28
  • not working for me. I add ‌ to the body? then add ? as well as adding the echo'
    ';     – cfaulk May 03 '15 at 00:20
  • Im noticing that now im getting a funky string at the top my my page ‌ – cfaulk May 03 '15 at 00:27
  • Ahh your site's on HTTPS so won't load the HTTP URL for Jquery. Alter the URL to `https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js` – TechnicalChaos May 03 '15 at 00:28
  • The funky string is just something you pasted in. – TechnicalChaos May 03 '15 at 00:28
  • Thanks for your help! I am now able to achieve what I was looking for. – cfaulk May 03 '15 at 00:44
1

First, give the Div id name like "mydiv"

second, make a button hover event. put inside this event

document.getElementById("mydiv").background = new color;

1

give your button and div an ID. create a class which represents the hover and the default state. set each state on mouseover and mouseout of your button.

there are more elegant ways depending on framework, and if you care about maintaining classes not part of the transition, but this is the general idea:

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";
   };
};
oooyaya
  • 1,773
  • 1
  • 15
  • 39