Использование функции jQuery .hover

Question

У меня есть некоторые промежутки, которые я пытаюсь переключить отображение, когда указатель наводится на них с помощью jQuery и свойства видимости CSS (свойство отображения тоже отлично, но ни один из них не работал очень далеко). Код пролетах выглядит следующим образом:

.buy1 { 
 
    visibility: hidden; 
 
}

<span class="buy1"> 
 
    <h3><a href="#">buy</a></h3> 
 
</span>

Скорее всего, причина в том, что мой JQuery является неправильным, так как это не мой конек. У кого-нибудь есть предложение чего-то, что будет работать лучше?

<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    
 
    $("span.buy1").hover(function() { 
 
    
 
     $("span.buy1").css("visibility","visible"); 
 
    
 
    }); 
 
    
 
}); 
 
</script>

Answer 1

$(document).ready(function() { 
    $('span.buy1').hover(
     function() { 
      $(this).show().stop().animate({ 
       left:'15px', 
       opacity:'0.5' 
      },500); 
     }, 
     function() { 
      $(this).hide().stop().animate({"opacity": "1"},5000);  
     } 
    ); 
}); 

Попробуйте это ..

Answer 2

Вы можете использовать это сделать на CSS

.buy1:hover { 
    visibility: visible; 
} 

.buy1 { 
    visibility: hidden; 
} 

Answer 3

См Hover over a hidden element to show it по аналогичному вопросу. В принципе, вы можете это сделать, установив непрозрачность в 0, и метод fadeTo jQuery или действительно любой другой способ регулировки непрозрачности.

$(document).ready(function() { 
 
    
 
    $("span.buy1").hover(function() { 
 
     $("span.buy1").fadeTo(1,1); 
 
    
 
    }, function() { 
 
     $("span.buy1").fadeTo(1,0); 
 
    }); 
 
    
 
});

.buy1 { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="buy1"> 
 
    <h3><a href="#">buy</a></h3> 
 
</span>

Answer 4

как о this

Jquery

$(document).ready(function() { 
    $("span.buy1 a").hover(function() { 
     $(this).stop().animate({"opacity" : "1"}); 
    }, function() { 
     $(this).stop().animate({"opacity" : "0"}); 
    }); 
}); 

CSS

.buy1 a{ 
    opacity:0; 
}