Question

在悬停按钮上，如果我们检查它所显示的代码是什么，但是如果我们删除了检查元素，则它不显示悬停效果。请参考我的代码并给出有价值的建议，说明为什么我的代码无法正常工作。请给我一个建议。

.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

尝试在a代码上使用悬停：.product-description a:hover .desc-btn {}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试使用document.GetElementById或document.querySelector（＆＃34; .desc-btn＆＃34;）。hide（）和hover相同的东西，除了在结尾处执行.show（）。还有display：block;

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>

在悬停按钮上，可见性：可见无效

4 个答案: