HTML CSS 在区域上悬停时更改 BG

Question

我想根据我悬停的区域更改图像。

不幸的是，我只能使用 HTML/CSS 来实现它。 我已经阅读并理解了类似的数量，但我无法得到想要的结果。 有人有想法吗？

    body {
    background-color: white;
    justify-content: center;
    align-content: center;
    overflow: hidden;
    
}
    
    
    .box {
    position: relative;
    width: 1044px;
    height: 461px;     
}
    .box .screen {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.7s;
}
     
    
    box.GER {
    background: url('worldmap.png');
}

    box.GER:hover {
    background : url("worldmap_ger.png");
        
}     
              

<div class="box"> 
          
    
<img src="worldmap.png" usemap="#image-map">

<map src="worldmap.png" name="image-map">
    
    <div class="GER">
        <area target="GER" alt="GER" title="GER" href="linkGER" coords="508,263,510,255,515,251,527,254,530,264,525,268,526,278,512,278,508,273" shape="poly">
    </div>

 

Answer 1

您使用了错误的选择器，需要更改为.box .GER 而不是box.GER

body {
    background-color: white;
    justify-content: center;
    align-content: center;
    overflow: hidden;
    
}
    
    
    .box {
    position: relative;
    width: 1044px;
    height: 461px;     
}
    .box .screen {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.7s;
}
     
    
    .box .GER {
    background: url('https://pngimg.com/uploads/world_map/world_map_PNG28.png');
    border: 1px solid red;
    height: 200px;
}

    .box .GER:hover {
    background : url("https://w7.pngwing.com/pngs/944/256/png-transparent-world-map-globe-world-map-flat-earth-asia-miscellaneous-blue-world.png");
        
}

<div class="box"> 
          

<map src="https://pngimg.com/uploads/world_map/world_map_PNG28.png" name="image-map">
    
    <div class="GER">
        <area target="GER" alt="GER" title="GER" href="linkGER" coords="508,263,510,255,515,251,527,254,530,264,525,268,526,278,512,278,508,273" shape="poly">
    </div>