Master Slider でページボタンをオンマウスで表示する

スライドショーのプラグインとして、とても使い勝手のいい、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
                        &amp;&amp; (offset.left + mswidth) > e.pageX
                        &amp;&amp; offset.top < e.pageY
                        &amp;&amp; (offset.top + msheight) > e.pageY
                ){
                    $(".ms-nav-next ,  .ms-nav-prev ").show();
                }else{
                    $(".ms-nav-next ,  .ms-nav-prev ").hide();

                }
            }
        );
    });
});

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.left + mswidth) > e.pageX

&& offset.top < e.pageY

&& (offset.top + msheight) > e.pageY

){

$(".ms-nav-next , .ms-nav-prev ").show();

}else{

$(".ms-nav-next , .ms-nav-prev ").hide();

}

);

});