javascript - 尝试使用 jquery 过滤非悬停元素

Question

我有一个图片库。基本上，我正在尝试寻找让悬停图像保持其样式属性但背景(非悬停图像，我应该说)过滤为灰度的东西。

这是我的第一个元素，我正在努力插入自己。我犯了一些错误，但从每一个错误中学习。感谢您的帮助。

HTML:

<section id="image-gallery">
            <div class="container">
            <div id="imageboxing" class="disciplines">
            <img src="images/martial-arts-banner/boxing.png">
            <div class="imagetext">
            <h3>BOXING</h3>
            </div>
            </div>

            <div id="imagekb" class="disciplines">
            <img src="images/martial-arts-banner/kickboxing.png">
            <div class="imagetext">
            <h3>KICKBOXING</h3>
            </div>
            </div>

            <div id="muaythai" class="disciplines">
            <img src="images/martial-arts-banner/muaythai.png">
            <div class="imagetext">
            <h3>MUAYTHAI</h3>
            </div>
            </div>

            <div id="wrestling" class="disciplines">
            <img src="images/martial-arts-banner/wrestling.png">
            <div class="imagetext">
            <h3>WRESTLING</h3>
            </div>
            </div>

            <div class="clear"></div>

            </div>
        </section>

JQUERY:

$(document).ready(function() {

    $(".disciplines img").hover(function(){
        var images = $(".disciplines img");
        $(this).toggleClass("active-image");
        $(this).css("cursor", "pointer");
        $(this).next().find('h3').slideToggle();
        if (images.not(".active-image") {
            $(images).css("filter", blur("20px"));

        }




    });

Answer 1

你必须像下面那样做:-

$(document).ready(function() {
  $("#image-gallery img").hover(function(){ // on hover of image
      $(this).toggleClass("active-image");
      $(this).css("cursor", "pointer");
      $(this).parent().css({"filter": ""}); //remove it's parent  filter css
      $('img').not($(this)).parent().css({"filter":'blur(5px)'}); //add filter css to all othe images parent-div apart from thr current clicked-one
  }, function () { //when hover-out
      $('.disciplines').css({"filter": ""}); //remove filter css from all div
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="image-gallery">
    <div class="container">
    <div id="imageboxing" class="disciplines">
    <img src="https://ae01.alicdn.com/kf/HTB1dizJKFXXXXa_XFXXq6xXFXXXs/Closed-Type-Boxing-Helmet-Head-Protector-For-Taekwondo-Karate-Tai-MMA-Muay-Thai-Kickboxing-Competition-Training.jpg_50x50.jpg">
    <div class="imagetext">
    <h3>BOXING</h3>
    </div>
    </div>

    <div id="imagekb" class="disciplines">
    <img src="http://www.days-gym.com/wp-content/uploads/2015/11/days-gym-website-logo.png">
    <div class="imagetext">
    <h3>KICKBOXING</h3>
    </div>
    </div>

    <div id="muaythai" class="disciplines">
    <img src="https://i.pinimg.com/favicons/50x/ded1fa7e09a93f576a8dc1060fbf82f7e63076e47a08abd0cf27887f.png?ca1416448b5d5bfb6c7465ba2cb5e0d4">
    <div class="imagetext">
    <h3>MUAYTHAI</h3>
    </div>
    </div>

    <div id="wrestling" class="disciplines">
    <img src="https://iawrestle.files.wordpress.com/2017/06/screen-shot-2017-06-14-at-10-35-09-am.png?w=50&h=50&crop=1">
    <div class="imagetext">
    <h3>WRESTLING</h3>
    </div>
    </div>

    <div class="clear"></div>

    </div>
</section>