Question

我在带有grayscale attribut的div上有不同的图像。我想在悬停效果上着色图片。现在我可以使用当前脚本为它们着色：

<div class="container">
<a href="#"><img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="featured-block-widget"></a><a href="#"><img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="featured-block-widget"></a>
<a href="#"><img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="featured-block-widget"></a>
</div>

CSS：

.container a img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);a
    -o-filter: grayscale(100%);
}

JS（关于chrome）：

$(".container a").hover(function() {
        $(".container a img").css("-webkit-filter", "none");
    }, function() {
        $(".container a img").css("-webkit-filter", "");
    });

您可以执行JSFiddle。

如何仅为当前图像着色？

感谢。

Answer 1

检查： -

$(".container a").hover(function() {
			
	    $(this).find("img").css("-webkit-filter", "none");
	}, function() {
	    $(this).find("img").css("-webkit-filter", "");
	});

.container a img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="container">
<a href="#"><img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="featured-block-widget"></a><a href="#"><img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="featured-block-widget"></a>
<a href="#"><img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="featured-block-widget"></a>
</div>

Answer 2

试试这个

$(".container a").hover(function() {
    $(this).find("img").css("-webkit-filter", "none");
}, function() {
    $(this).find("img").css("-webkit-filter", "");
});

Answer 3

我检查了你的小提琴，但没有发现任何着色效果。但我认为你想要这样的效果：

＆＃13;

$(document).ready(function() {
  $(".container a img").each(function() {
    $(this).addClass("img_gray");
  })

  $(".container a").hover(function() {
    $(this).find("img").removeClass("img_gray");
  }, function() {
    $(this).find("img").addClass("img_gray");
  });
});

＆＃13;

.img_gray {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
  <a href="#">
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="featured-block-widget">
  </a>
  <a href="#">
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="featured-block-widget">
  </a>
  <a href="#">
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="featured-block-widget">
  </a>
</div>

＆＃13;

Answer 4

Do u need like this?

we want to see a particular image by using this keyword.It refers to current object that means your current image.

您可以参考链接：https://jsfiddle.net/5shf262g/3/

Answer 5

定义补丁并使用this您不需要使用.find()

 $(".container a img").hover(function() {
            $(this).css("-webkit-filter", "none");
        }, function() {
           $(this).css("-webkit-filter", "");
        });

https://jsfiddle.net/5shf262g/5/

仅使用css

.container a img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
.container a img:hover{
    filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
}

https://jsfiddle.net/5shf262g/6/

使用jquery突出显示悬停元素

5 个答案: