Question

我对使用按钮设计的背景图像应用的css悬停效果有疑问。目的是调用与按钮大小相同的其他图像。

它可以正常工作，但“悬停”属性调用的图像占据了所有屏幕。

由于

<head>
  <style scoped="scoped" type="text/css">
    .menu-map {
      width:100%; 
      position:relative; 
      margin-bottom:20px;
    } 
    
    .menu-map img {
      display:block; 
      width:100%;
    } 
    
    .menu-map .hotspots {
      width:100%; 
      height:100%; 
      position:absolute; 
      left:0; 
      top:0; 
      visibility:hidden;
    }
   
    .menu-map a {
      display:block; 
      position:absolute; 
      background:#000; 
      z-index:100; 
      opacity:0; 
      filter: alpha(opacity=0); 
      border:0px solid transparent; 
      border-radius:20px;
    }

    .menu-map a.p1 {
      left:26%;
      top:26%; 
      width:10%; 
      height:20%;
    } /* ACES */

    .menu-map:hover .hotspots {
      visibility:visible;
    } 

    .menu-map .hotspots div:hover b {
      width:0; 
      padding:0;
    }

    .menu .hotspots div:hover p {
      display:block;
    } 

    #BUTTON1 img.p1:hover {
      opacity:0;
      left:26%; 
      top:26%; 
      width:10%; 
      height:20%;
    }
  </style>
</head>

<html>
<body>
<div class="container-fluid">
<div>
<div class="menu-map"><img src="images/image_with_menu_buttons.png" alt="Navigation Menu" /> 
   <div class="hotspots">
   <div title="BUTTON1"><img class="p1" aria-haspopup="false" href="page1" target="_self" rel="nofollow" src="images/button1_to_hover_effect.png" ></a></div>
	</div>
	</div>
</div>
</div>
</body>
</html>

如何使用css

0 个答案: