javascript - 在图库中同时触发单独的悬停效果(jQuery + CSS)

Question

正在处理投资组合画廊:flowmedia.dk/new

非事件状态:

将鼠标悬停在缩略图的前 2/3 处会触发图像从灰度变为彩色:

将鼠标悬停在缩略图底部的 1/3 处会触发图片说明。:

字幕 (jQuery):

jQuery(document).ready(function($) {
    $(document).ready(function(){
        $('.caption').hide();
        $('#portfolio-container .element').hover(function () {
            $('.caption', this).stop().fadeTo('slow', 1.0);
        },
        function () {
            $('.caption', this).stop().fadeTo('slow', 0); 
        });
    });
});

灰度(CSS):

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
     -webkit-filter: grayscale(0%);
    ...
}

如何在悬停时同时触发字幕和灰度到彩色效果或用字幕触发灰度到彩色？

(将鼠标悬停在缩略图上的任意位置，图像将从灰度变为彩色。)

Answer 1

这可以仅使用 css 轻松实现。

CSS

.grayscale {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto;
  top: 30px;
  border: 3px solid rgba(0, 0, 0, 0.6);
  padding: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.bird {
  width: 100%;
  height: 100%;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
}

.bird:hover {
  -webkit-filter: grayscale(0%);
}

.grayscale p {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
}

.grayscale:hover p {
  display: inline;
}

.grayscale p:hover strong { /* Can be h1, h2, span, etc... */
  color: brown;
}

HTML

<div class="grayscale">
   <img class="bird" src="http://jpowell43.mydevryportfolio.com/flatDesign/images/birds.svg" alt="birds" />
   <p><strong>The wild Swallow bird</strong><br />This crazy and unique bird loves to fly over the sky in search of a tasty div tag</p>
</div>

JSFIDDLE

如果这不符合您的需要，请告诉我，我会删除或编辑它。我只是发现如果不需要，最好不要使用 jQuery!