私はhoverFlowの JQuery プラグインを使用していますが、これまでのところ期待どおりに動作しますが、画面のサイズが 799px 未満の場合は削除し、画面のサイズが 800px を超える場合は元に戻したいと思います。これは私のコードです:
function setEffects() {
if(document.documentElement.clientWidth >= 800){
if($("#menu-main-nav-menu a span").length == 0){
$("#menu-main-nav-menu a").append("<span> </span>");
$("#menu-main-nav-menu a").hover(function(e) {
$(this).hoverFlow(e.type, { width: 248 }, 200)
.css('overflow', 'visible')
.find('span')
.hoverFlow(e.type, { width: 5 }, 200)
}, function(e) {
$(this).hoverFlow(e.type, { width: 233 }, 200)
.css('overflow', 'visible')
.find('span')
.hoverFlow(e.type, { width: 20 }, 200)
});
}
}else{
if($("#menu-main-nav-menu a span").length != 0){
$("#menu-main-nav-menu a").remove('span');
}
}
}
$(document).ready(setEffects);
window.onresize = setEffects;
事前に感謝します。質問がある場合はお知らせください:-)