0

在作品集画廊工作：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%);
    ...
}

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

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

4

1 回答 1

0

仅使用 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 会更好！

于 2013-10-28T14:37:13.910 回答