スライドショーのプラグインとして、とても使い勝手のいい、Master Sliderを使っているのですが、左右にスライドさせるためのボタンが大きくて、肝心のバナーを隠してしまっているので、マウスポインターが上に来た時だけ、常時させるようにする方法。
CSSや、JQueryで、hoverを使うと、うまく表示非表示を切り替えられなかったので、マウスポインタの座標と、スライダーの座標をチェックして、範囲内にあれば、ボタンを表示、範囲外なら非表示となるようにしています。
jQuery(function($) { $(document).ready(function () { var show = 0; $(window).mousemove( function(e){ var offset = $(".ms-container").offset(); var mswidth = $(".ms-container").width(); var msheight = $(".ms-container").height(); console.log('top: ' + offset.left + mswidth ); console.log('top: ' + e.pageX ); if(offset.left e.pageX && offset.top e.pageY ){ $(".ms-nav-next , .ms-nav-prev ").show(); }else{ $(".ms-nav-next , .ms-nav-prev ").hide(); } } ); }); });
[Collab] Collab…