懸停按鈕上，可見度：可見不起作用

懸停按鈕上，如果我們檢查它所顯示的代碼，但如果我們刪除檢查元素，它不顯示懸停效果。請參考我的代碼，併爲我的代碼無法正常工作提供寶貴的建議。請給我建議。懸停按鈕上，可見度：可見不起作用

.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>

來源

2016-10-22 Learner

嘗試的document.getElementById或document.querySelector（「降序排序BTN」）。hide（）和除外懸停同樣的事情做到底.show（）。還有顯示：塊;

來源

2016-10-22 06:41:25 henhen

請嘗試使用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>

來源

2016-10-22 06:45:07

對不起，這個代碼不工作按照我們的要求。 – Learner

因此，創建一個你想要的演示，所以其他人能夠顯示出現問題 –

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>

來源

2016-10-22 07:51:24 Learner

使用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>

來源

2016-10-22 08:07:04

懸停按鈕上，可見度：可見不起作用

回答

相關問題