Javascript 在图像库中同时触发单独的悬停效果（jQuery+；CSS）

在公文包画廊工作：

非活动状态：

将鼠标悬停在缩略图顶部的2/3上会触发图像从灰度变为彩色：

将鼠标悬停在缩略图底部1/3处会触发图像标题。：

标题（jQuery）：

灰度（CSS）：

img.grayscale:悬停{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
-webkit过滤器：灰度（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;
}

.grayscale{
宽度：200px；
高度：200px；
位置：相对位置；
保证金：0自动；
顶部：30px；
边框：3倍实心rgba（0,0,0,0.6）；
填充：10px；
背景：rgba（255,255,255,0.5）；
}
伯德先生{
宽度：100%；
身高：100%；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
-webkit过滤器：灰度（100%）；
}
.鸟：悬停{
-webkit过滤器：灰度（0%）；
}
.灰度p{
位置：绝对位置；
底部：0；
左：0；
显示：无；
}
.灰度：悬停p{
显示：内联；
}
.grayscale p:悬停强{/*可以是h1、h2、span等*/
颜色：棕色；
}

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>

野生燕子鸟
这只疯狂而独特的鸟喜欢飞越天空，寻找美味的潜水签

---

如果这不符合您的需要，请告诉我，我将删除或编辑它。我只是觉得如果不需要的话，最好不要使用jQuery

啊!！这么简单。jQuery（同位素）用于图像排序效果，所以我一直在jsland。让我试试你的建议。哈哈，我知道你的意思，一旦你在jQuery的土地上，你可能永远找不到你的出路：帕拉斯，不是那么简单。定制一个超级膨胀的WP主题（注意所有的JS调用）-现在尝试重写公文包模板而不破坏任何东西>。哦，天哪，wordpress，多么可怕的工具哈。我建议最好的方法是进入css，找到图像是如何包含/命名/标题是什么，然后让我知道该元素的html结构。我会在你的网站上的代码峰值，看看我是否能找到一个好的解决方案，但word press制作了很多不需要的代码。这个主题已经为万圣节准备了很久了。这是我的Git repo:-includes/portfolio.php生成拇指。请原谅额外的课程。（（…该学杰基尔了…）

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

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