以某种方式禁用页面加载时的/removing悬停效果，在单击事件时启用

Question

除了一个灯箱，我还有一个特殊的galleri滑块(在第一张幻灯片上显示8张照片，其余的放在第二张幻灯片上)。每边都有一个箭头(左箭头和右箭头)。它们都具有悬停效果(标准:不透明度0.5。Hover: 1;)但是当我们在幻灯片1上时，我不希望左箭头有悬停效果。当我滚动到幻灯片2时，我想让左箭头获得悬停效果，而右箭头应该删除悬停效果。

HTML：

​

       <section id="galleriMain_container">
            <div id="galleriSectionTitle_container">
                <p class="galleriSectionTitle">GALLERI</p>
            </div>
            <div id="galleriMiddle_container">
            <div id="galleriNavArrowLeft_container">
                <svg class="navArrowLeft" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="50px" height="50px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;"
	 xml:space="preserve">
<g>
	<path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0
		c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744
		c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"/>
</g>
</svg>
            </div>
            <div id="galleriesContainer">...</div>
                                    <div id="galleriNavArrowRight_container">
                <svg class="navArrowRight" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="50px" height="50px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;"
	 xml:space="preserve">
<g>
	<path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0
		c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744
		c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"/>
</g>
</svg>
            </div>

​

jQuery：

​

'use strict';

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

​

CSS：

​

.navArrowLeft:hover {
    opacity: 1;
    transition: opacity 0.4s ease;
}
.navArrowRight:hover {
    opacity: 1;
    transition: opacity 0.4s ease;
}
.navArrowLeft, .navArrowRight{
    margin-top: 235px;
    cursor: pointer;
    fill: #4E4E4E;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}
.navArrowRight {
    -webkit-transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
    transform: scaleX(-1);
    float:left;
}

​

我怎样才能用jQuery做到这一点？

谢谢!

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");
    }
}

Answer 2

您可以使用jQuery完成此操作，但您也可以使用嵌套规则使用CSS完成此操作。如果为每张幻灯片创建一个CSS类，则可以有两组悬停规则，如下所示：

.firstPane .navArrowLeft:hover {
  opacity: 1;
  transition: opacity 0.4s ease;
}
.secondPane .navArrowRight:hover {
    opacity: 1;
    transition: opacity 0.4s ease;
}

将类"firstPane“和"secondPane”分别添加到窗格中。这样，悬停效果就会有选择地应用，具体取决于您使用的窗格。您还可以使用jQuery .addClass()和removeClass()，具体取决于每个窗格的焦点

Answer 3

试试这个：

$(document).ready(function() {
    var $arrowRight = $('.navArrowRight')
      , $arrowLeft = $('.navArrowLeft')
    ;

    $arrowRight.click(function () {
        var $this = $(this);
        $('#galleri_container').animate({'margin-left':'-105.5%'}, 1000, function() {
            $arrowLeft.removeClass('hover');
            $arrowRight.addClass('hover');

        });
    });
    $arrowLeft.click(function () {
        var $this = $(this);
        $('#galleri_container').animate({'margin-left':'0'}, 1000, function() {
            $arrowRight.removeClass('hover');
            $arrowLeft.addClass('hover');
        });
    }); 
});

对于给定的CSS：

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