Question

所以网站是www.KBduct.com。我被赋予了在爆炸隔离阀的主页上创建一个新的红色按钮的任务。我只是简单地复制了用于创建其他按钮的编码，例如“Ducting layout Planner＆＃39;并改变了背景颜色。按钮在我的计算机上工作正常，但对于其他人来说，似乎他们无法点击按钮。我添加的悬停效果也不起作用。

我检查了所有元素，发现CSS和html编码看起来很好。我已经在我的计算机上对Firefox，Internet Explorer和chrome进行了测试。绝对没有问题，但对其他人来说并非如此。我相信由于一些奇怪的原因，按钮不会被识别为链接元素而只是静态图像。我尝试将锚标记添加到div中，但这只会使文本周围的框完全消失。

此时我感到困惑，需要知道为什么会这样。

CODE：

<div style="clear:both;"></div>

<div class="catalog">



            <a href="<?php echo $baseUrl; ?>/ducting-components-catalog-order/"><p>DOWNLOAD CATALOG <img src="<?php echo $baseUrl; ?>/img/download_icon.png"></p></a>



</div>



<div class="catalog">



            <a href="https://www.youtube.com/watch?v=X_tbdgGVGrU&feature=youtu.be" target="_blank"><p>CLAMP TOGETHER VIDEO </p></a>



</div>



<div class="catalog">



            <a href="<?php echo $baseUrl; ?>/ducting-layout-planner" target="_blank"><p>DUCTING LAYOUT PLANNER</p></a>



</div>



<div class="catalogB">



            <a href="<?php echo $baseUrl; ?>/atex-nfpa-certified-backdraft/" target="_blank"><span style="font-size: 14px;"><p>EXPLOSION ISOLATION VALVES!</p></span></a>



</div>




</div><!--leftbar wrapper-->


        <!--<div id="app-types">



            <a href="#"><p>APPLICATION TYPES</p></a>



            <div class="apphover">



                  <div class="quadicon">



                      <img src="img/oily-mist.png"><h3>OILY MIST</h3><p>For industrial duct and ducting components Lorem Ipsum.</p>



                  </div>



                  <div class="quadicon">



                  <img src="img/oily-mist.png"><h3>OILY MIST</h3><p>For industrial duct and ducting components Lorem Ipsum.</p>



                  </div>



                  <div class="quadicon">



                  <img src="img/oily-mist.png"><h3>OILY MIST</h3><p>For industrial duct and ducting components Lorem Ipsum.</p>



                  </div>



                  <div class="quadicon">



                  <img src="img/oily-mist.png"><h3>OILY MIST</h3><p>For industrial duct and ducting components Lorem Ipsum.</p>



                  </div>



            </div>



        </div>-->



    <!--<div class="inMenuicon"></div>-->

CSS：

.catalog    {   

/*z-index: 2;

position: absolute;
margin-top: 9%; */
display:block;
}


.catalog a  { display:block; width:18%; margin-top:20px;  min-width:250px; background:#999999; padding:5px 0px 5px 20px; border:solid 2px #fff !important;}

.catalog a:hover    {background:#0A73AA;}

.catalog a img  {   float:right; margin-right:5px; margin-top:2px; width:15px; height:auto;}

.catalogB   {   

/*z-index: 2;

position: absolute;
margin-top: 9%; */
display:block;
}


.catalogB a { display:block; width:18%; margin-top:20px;  min-width:250px; background:#FD0700; padding:5px 0px 5px 20px; border:solid 2px #fff !important;}

.catalogB a:hover   {background:#0A73AA;}

.catalogB a img {   float:right; margin-right:5px; margin-top:2px; width:15px; height:auto;}

#products   {
    position: relative;
    width: 70%;
    background:rgba(57, 57, 57, .8);
    float: right;
    height: 95%;
    top: 0;
    left: 0;
    padding:30px;

    z-index:0;
    margin-bottom:50px;
    padding-bottom:150px; 
    margin-bottom:100px;"

}

Answer 1

有一个覆盖按钮的大透明元素#slideup-cont。使按钮的z-index高于#slideup-cont。

为什么链接和悬停效果在我的计算机上运行但没有人可用？

1 个答案: