スライドショーのプラグインとして、とても使い勝手のいい、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…