Change div Background Image when hovering on another div

I'm trying to create an interactive map on which some continents are highligthed when you hover on them and I am using multiple images to do so. Concretely, I am trying to change the background-image set in one div when I hover on certain parts of the background.

In the CSS code, I am using the tilde selector but it does not seem to work. Could you help me finding the issue please?

HTML Code:

<html>
<div class="map">
 <div class="americas">
 </div>

 <div class="emeari">
 </div>

 <div class="emeari2">
 </div>

 <div class="ap">
 </div>
</div>
</html> 

CSS Code:

 .map {
  position:fixed;
  background-image: url(World_Map.jpg); 
  width:960px;
  height:540px;
 }


.americas {
  position:absolute;
  width:364.8px;
  height:540px;
  border: 1px solid black;
}

.emeari {
  position: absolute;
  width: 297.6px;
  height: 540px;
  left: 364.8px;
  border: 1px solid black;
}

.emeari2 {
  position:absolute;
  width:297.6px;
  height:183.6px;
  right: 0px;
  border: 1px solid black;
}

.ap {
  position:absolute;
  width:297.6px;
  height:356.4px;
  bottom: 0px;
  right: 0px;
  border: 1px solid black;
}


/* Hover */

.americas:hover ~ .map{
  background-image: url(Americas_Map.jpg);
}

.emeari:hover ~ .map{
  background-image: url(Emeari_Map.jpg);
}

.emeari2:hover ~ .map{
  background-image: url(Emeari_Map.jpg);
}

.ap:hover ~ .map{
  background-image: url(Asia_Map.jpg);
}

Thanks for you help !

3 answers

  • answered 2018-11-08 00:31 itodd

    The ~ selector is the sibling selector, it can only select elements at the same level. In your code .map is the parent element and there is no "parent" selector in CSS.

    You can fix this however by moving .map inside and wrapping in a container element.

    .map,
    .map-wrapper {
      position:fixed;
      width:960px;
      height:540px;
    }
    
    .map {
      background-image: url(World_Map.jpg);
      z-index: -1;
    }
    
    
    .americas {
      position:absolute;
      width:364.8px;
      height:540px;
      border: 1px solid black;
    }
    
    .emeari {
      position: absolute;
      width: 297.6px;
      height: 540px;
      left: 364.8px;
      border: 1px solid black;
    }
    
    .emeari2 {
      position:absolute;
      width:297.6px;
      height:183.6px;
      right: 0px;
      border: 1px solid black;
    }
    
    .ap {
      position:absolute;
      width:297.6px;
      height:356.4px;
      bottom: 0px;
      right: 0px;
      border: 1px solid black;
    }
    
    
    /* Hover */
    
    .americas:hover ~ .map{
      background-image: url(Americas_Map.jpg);
    }
    
    .emeari:hover ~ .map{
      background-image: url(Emeari_Map.jpg);
    }
    
    .emeari2:hover ~ .map{
      background-image: url(Emeari_Map.jpg);
    }
    
    .ap:hover ~ .map{
      background-image: url(Asia_Map.jpg);
    }
    <div class="map-wrapper">
       <div class="americas"></div>
    
       <div class="emeari"></div>
    
       <div class="emeari2"></div>
    
       <div class="ap"></div>
       
       <div class="map"></div>
    </div>

  • answered 2018-11-08 00:31 Brian Moreno

    Unfortunately there is currently no parent selector in CSS, but you can achieve this using JS. In this example I'm using jQuery to update the parent's background color (you would have to update the background image).

    WORKING FIDDLE

    HTML:

    <div class="map">
     <div class="americas">
     </div>
    
     <div class="emeari">
     </div>
    
     <div class="emeari2">
     </div>
    
     <div class="ap">
     </div>
    </div>
    

    CSS

    .map {
      position:fixed;
      background-image: url(World_Map.jpg); 
      width:960px;
      height:540px;
     }
    
    
    .americas {
      position:absolute;
      width:364.8px;
      height:540px;
      border: 1px solid black;
    }
    
    .emeari {
      position: absolute;
      width: 297.6px;
      height: 540px;
      left: 364.8px;
      border: 1px solid black;
    }
    
    .emeari2 {
      position:absolute;
      width:297.6px;
      height:183.6px;
      right: 0px;
      border: 1px solid black;
    }
    
    .ap {
      position:absolute;
      width:297.6px;
      height:356.4px;
      bottom: 0px;
      right: 0px;
      border: 1px solid black;
    }
    

    JS

    $(".americas").hover(function () {
        $(this).parent().css("background", "red"); // CHANGE IMAGE PROPERTY HERE
    });
    
    $(".emeari").hover(function () {
        $(this).parent().css("background", "blue"); // CHANGE IMAGE PROPERTY HERE
    });
    
    $(".emeari2").hover(function () {
        $(this).parent().css("background", "green"); // CHANGE IMAGE PROPERTY HERE
    });
    
    $(".ap").hover(function () {
        $(this).parent().css("background", "orange"); // CHANGE IMAGE PROPERTY HERE
    });
    

  • answered 2018-11-08 21:42 A.Gonzalez

    I am now trying to add a box that would appear when hovering each div (continent). I followed the same logic as @itodd mentionned in his answer, but it does not seem to work for this part.

    CSS:

    h1 {
      font-size: 25px;
      font-weight: 200;
    }
    
    .container {
      width: 1030px;
      margin: left;
    }
    
    .hlinkHomeAmer, .hlinkHomeEmea, .hlinkHomeAsia {
      font-size: 10px;
      color: black;
      background-color: antiquewhite;
      visibility: hidden;  
    }
    
    /* Interactive Map */
    .map, .map-wrapper {
      position:absolute;
      width:960px;
      height:540px;
      border:0px;
    }
    
    .map {
      background-image: url(World_Map.jpg);
      z-index: -1;
    }
    
    
    /* div */
    .americas, .americas-wrapper {
      position:absolute;
      width:364.8px;
      height:540px;
    }
    
    .emeari, .emeari-wrapper {
      position: absolute;
      width: 297.6px;
      height: 540px;
      left: 364.8px;
    }
    
    .emeari2 {
      position:absolute;
      width:297.6px;
      height:183.6px;
      right: 0px;
    }
    
    
    .ap, .ap-wrapper {
      position:absolute;
      width:297.6px;
      height:356.4px;
      bottom: 0px;
      right: 0px;
    }
    
    
    /* Hover */
    
    .americas-wrapper:hover ~ .map{
      background-image: url(Americas_Map.jpg);
    }
    
    .emeari-wrapper:hover ~ .map{
      background-image: url(Emeari_Map.jpg);
    }
    
    .emeari2-wrapper:hover ~ .map{
      background-image: url(Emeari_Map.jpg);
    }
    
    .ap-wrapper:hover ~ .map{
      background-image: url(Asia_Map.jpg);
    }
    
    
    .americas:hover ~ .hlinkHomeAmer{
      visibility: visible;
    }
    
    .emeari:hover ~ .hlinkHomeEmea{
      visibility: visible;
    }
    
    .emeari2:hover ~ .hlinkHomeEmea{
      visibility: visible;
    }
    
    .ap:hover ~ .hlinkHomeAsia{
      visibility: visible;
    }
    

    HTML:

    <html> 
    
      <body>
    
        <h1 class="container">
          <img src="https://widgetfactory.extranet.3ds.com/api/download/WebDAV/file/SSCServicesDEV/Images/DSLogo.png" width="25%" height="25%">
        </h1>   
        <br>
    
        <div class="container">
          Welcom !<br><br>
    
          The purpose .<br><br>
    
          Please select your continent on the map below in order to obtain your regional contact information.
    
    
        <br><br>
    
    
         <div class="map-wrapper">
    
          <div class="americas-wrapper">
           <div class="americas">
            <div class="hlinkHomeAmer">
              Proposal SOW & PO: <a href="mailto:x@xx.com">x@xx.com</a><br>
              Billing & RevRec: <a href="mailto:x@xx.com">x@xx.com</a>
            </div>
           </div>
          </div>
    
          <div class="emeari-wrapper">
           <div class="emeari">
            <div class="hlinkHomeEmea">
              Proposal SOW & PO: <a href="mailto:x@xx.com">x@xx.com</a><br>
              Billing & RevRec: <a href="mailto:x@xx.com">x@xx.com</a>
            </div>
           </div>
    
           <div class="emeari2">
           </div>
          </div>
    
          <div class="ap-wrapper">
           <div class="ap">
            <div class="hlinkHomeAsia">
              Proposal SOW & PO: <a href="mailto:x@xx.com">x@xx.com</a><br>
              Billing & RevRec: <a href="mailto:x@xx.com">x@xx.com</a>
            </div>
           </div>  
          </div> 
    
           <div class="map">
           </div>
    
         </div> 
        </div>
      </body>
    </html>  
    

    Thanks again in advance for your help !