Блог

Главная - Вопросы по программированию - При наведении курсора на кнопку видимость: видимость не работает

При наведении курсора на кнопку видимость: видимость не работает

#javascript #html #css

#javascript #HTML #css

Вопрос:

При наведении курсора мыши, если мы проверяем написанный код, он показывает, но если мы удалим элемент 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>

Ответ №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>

Комментарии:

1. Извините, этот код работает не в соответствии с нашими требованиями.

2. Итак, создайте демо-версию, какую вы хотите, и чтобы другие могли показать, в чем проблема

Ответ №2:

Попробуйте document.getElementById или document.Выбор запроса («.desc-btn»).скрыть () и то же самое для наведения, за исключением do .show() в конце. Также есть отображение: блок;

Ответ №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>

Ответ №4:

Используйте hover тег привязки through, а также добавьте 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>