javascript - 在悬停按钮上，可见性 :visible is not working

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

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