javascript - Hide() with fadeIn()/fadeOut() -
i'm trying fade in , fade out jquery. however, i'm having issues.
i hide div when page loads, when hover on fade in, fades in second disappears. have hover out hover in.
my jquery:
$(document).ready(function(){ $('#hidedsl6').hide(); $('#showdsl6').hover(function(){ $('#hidedsl6').fadein(); }, function(){ $('#hidedsl6').fadeout(); }); $('#showfttn10').hover(function(){ }); $('#showfttn15').hover(function(){ }); $('#showfttn25').hover(function(){ }); $('#showfttn50').hover(function(){ }); });
my html:
<h3 class="dsllocation" id="showdsl6">dsl 6</h3> <button class="btn btnblue" id="hidedsl6" type="button">order now!</button>
why use jquery when it can done css
.products{ display:table; table-layout:fixed; width: 100%; } .option{ display: table-cell; position: relative; text-align: center; padding: 24px; background: #c0ffee; } .option button{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; cursor: pointer; background: #1cea6e; transition: 0.3s; -webkit-transition: 0.3s; opacity: 0; visibility: hidden; } .option:hover button{ opacity: 1; visibility: visible; }
<div class="products"> <div class="option"> <h3>dsl 6</h3> <button>order now!</button> </div> <div class="option"> <h3>dsl 30</h3> <button>order now!</button> </div> <div class="option"> <h3>super dsl 50</h3> <button>order now!</button> </div> </div>
Comments
Post a Comment