Question

除了灯箱，我还有一个特殊的galleri滑块（在第一张幻灯片上显示8张照片，在第二张幻灯片上显示其余照片）。在每一侧，都有一个箭头（左和右）。它们都有悬停效果（标准：不透明度0.5。悬停：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：

fix

JS：

初始页面加载：

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

页面更改：

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

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

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

更新

由于JQuery存在问题，因此无法使用SVG。

使用此代替SVG标记：

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

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

添加课程＆＃34; firstPane＆＃34;和＆＃34; secondPane＆＃34;分别到窗格。这样，根据您拥有的窗格，有选择地应用悬停效果。您还可以使用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;
}

以某种方式禁用/删除页面加载上的悬停效果，启用单击事件

3 个答案:

更新