在wordpress中创建响应式图像链接映射

Question

我在wordpress主题的标题中有一个图像链接图，我需要在750px下进行响应。我已经能够在标题中显示链接，但它们不活跃，我不知道为什么。现在我只是试图获得＆＃34; p1＆＃34;链接到工作。

网站在这里：indie-scene.com

这是我的php：

<div class="header header-default">
        <img src="<?php echo $ti_option['site_logo']['url']; ?>" alt="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>" width="<?php echo $ti_option['site_logo']['width']; ?>" height="<?php echo $ti_option['site_logo']['height']; ?>" />
       <div class="hotspots">
            <a href="http://www.nearlynewlywed.com" class="p1"></a>
        <div title="home">
            <a href="http://www.indie-scene.com" class="p2"></a>
        </div>
        <div title="sell">
            <a href="http://www.nearlynewlywed.com/a/sell" class="p3"></a>
        </div>
      </div>
    </a><!-- Logo -->

和我在css中的媒体查询

@media only screen and (max-width: 750px)  {
 .header {
   width:100%;
}
 .header img {
  content: url(http://indie-scene.com/wp-content/uploads/2014/10/logo_no_banner.png);
max-width: 276px;
}
.header {width:100%; position:relative; }
.header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
.header a {display:block; position:absolute; background:#000; z-index:100; opacity:0.2; filter: alpha(opacity=20); border:1px solid transparent; }
.header a.p1 {left:50%; top:5%; width:50%; height:50%;}

Answer 1

这些链接没有显示，因为您已将visibility div的hotspots设置为hidden宽度为750px以下的地方：

.header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; }

您需要从上面的CSS中删除visibility:hidden;或将其更改为visibility: visible;。

在上图中，我使用开发者工具将visibility div的hotspots设置为visible，您可以看到您的.p1链接现在正在显示。