javascript - 以某种方式禁用/删除悬停对页面加载的影响，启用点击事件

Question

<分区>

Answer 1

您可以简单地为您的两个箭头切换悬停类。

CSS:

.hover:hover {
  opacity: 1;
  transition: opacity 0.4s ease;
}

JS:

初始页面加载:

$(function(){
  $(".navArrowRight").addClass("hover");
});

页面变化:

$(".navArrowRight").toggleClass("hover");
$(".navArrowLeft").toggleClass("hover");

这样，您的代码应该如下所示:

'use strict';

$(document).ready(function() {
    $(".navArrowRight").addClass("hover");
    $('.navArrowRight').click(function (){
        $('#galleri_container').animate({'margin-left':'-105.5%'}, 1000);
        $(".navArrowRight").toggleClass("hover");
        $(".navArrowLeft").toggleClass("hover");
    });
    $('.navArrowLeft').click(function (){
        $('#galleri_container').animate({'margin-left':'0'}, 1000);
        $(".navArrowRight").toggleClass("hover");
        $(".navArrowLeft").toggleClass("hover");
    }); 
});

更新

这不适用于 SVG，因为 JQuery 有问题。

将其与 SVG 标签一起使用:

'use strict';

$(document).ready(function() {
    $(".navArrowRight").attr("class","navArrowRight hover");
    $('.navArrowRight').click(function (){
        $('#galleri_container').animate({'margin-left':'-105.5%'}, 1000);
        toggle();
    });
    $('.navArrowLeft').click(function (){
        $('#galleri_container').animate({'margin-left':'0'}, 1000);
        toggle();
    }); 
});

function toggle(){
    if($(".navArrowRight").attr("class") == "navArrowRight"){
        $(".navArrowRight").attr("class","navArrowRight hover");
        $(".navArrowLeft").attr("class","navArrowLeft");
    } else {
        $(".navArrowRight").attr("class","navArrowRight");
        $(".navArrowLeft").attr("class","navArrowLeft hover");
    }
}