ホバーボタンで、visibility：visibleが機能していない

Question

ホバーボタンでは、書かれたコードが何であれ検査しますが、inspect要素を削除してもホバー効果は表示されません。私のコードを参照し、私のコードが正しく動作しない理由を示唆してください。私に提案をお願いします。

.desc-btn { 
 
    color: #fff; 
 
    background: #00BCD4; 
 
    padding: 4px; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    border: 1px solid white; 
 
    border-radius: 3px; 
 
    line-height: 15px; 
 
    position: relative; 
 
    bottom: 30px; 
 
    left: 0px; 
 
    visibility: hidden; 
 
} 
 
.desc-btn:hover { 
 
    color: #00bcd4 !important; 
 
    background: #fff; 
 
    border: 1px solid #00bcd4; 
 
    visibility: visible; 
 
}

<div class="product-description"> 
 
    <p class="text-center"><b>BOSE</b> Headset</p> 
 
    <a href="<?php echo base_url(); ?>/index.php/welcome/item"> 
 
    <p class="desc-btn"><i class="fa fa-envelope"></i> Contact Supplier</p> 
 
    </a> 
 
</div>

Answer 1

するTryのdocument.getElementByIdまたはdocument.querySelector（ "DESC-BTN"）。（非表示）と（.SHOWを行う除くホバーのための同じもの）最後に。 display：blockもあります。

Answer 2

aタグにホバーを使用してみてください：.product-description a:hover .desc-btn {}

.desc-btn{ 
 
    color: #fff; 
 
    background: #00BCD4; 
 
    padding: 4px; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    border: 1px solid white; 
 
    border-radius: 3px; 
 
    line-height: 15px; 
 
    position:relative; 
 
    bottom:30px; 
 
    left:0px; 
 
    visibility:hidden; 
 
} 
 
.product-description a:hover .desc-btn { 
 
    color: #00bcd4 !important; 
 
    background: #fff; 
 
    border: 1px solid #00bcd4; 
 
    visibility:visible; 
 
}

<div class="product-description"> 
 
    <p class="text-center"><b>BOSE</b> Headset</p> 
 
    <a href="<?php echo base_url(); ?>/index.php/welcome/item"> 
 
    <p class="desc-btn"><i class="fa fa-envelope"></i> Contact Supplier</p></a> 
 
</div>

Answer 3

This i has done.  
<div class="imgage-description"> 
      <b><p>Product Name</p></b> 
      <span>Product Description</span><br/> 
      <span>Supplier Name</span><br/> 
      <a href="<?php // echo base_url();?>index.php/welcome/contact"> 
       <button class="btn desc-btn" title="Contact Supplier"><i class="fa fa-envelope"></i> Contact Supplier</button> 
      </a> 
      </div> 


<script> 
    $('.desc-btn').hide(); 
    $('.product-display').mouseenter(function(){ 

     $(this).find('.desc-btn').show(); 

    }); 
    $('.product-display').mouseleave(function(){ 

     $(this).find('.desc-btn').hide(); 

    }); 
</script> 

Answer 4

使用hoverまた、アンカータグを通過して、タグを固定するdisplay:blockプロパティを追加します。

.desc-btn { 
 
    color: #fff; 
 
    background: #00BCD4; 
 
    padding: 4px; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    border: 1px solid white; 
 
    border-radius: 3px; 
 
    line-height: 15px; 
 
    position: relative; 
 
    left: 0px; 
 
    visibility: hidden; 
 
} 
 
.product-description a { 
 
    display: block; 
 
} 
 
.product-description a:hover .desc-btn { 
 
    color: #00bcd4 !important; 
 
    background: #fff; 
 
    border: 1px solid #00bcd4; 
 
    visibility: visible; 
 
}

<div class="product-description"> 
 
    <p class="text-center"><b>BOSE</b> Headset</p> 
 
    <a href="<?php echo base_url(); ?>/index.php/welcome/item"> 
 
    <p class="desc-btn"><i class="fa fa-envelope"></i> Contact Supplier</p> 
 
    </a> 
 
</div>