Question

我的代码在这里...... https://jsfiddle.net/1r9me7rc/2/

所以这就是我想要的样子......当我滚动图像时，它会被染成50％洋红色，文字变成洋红色。大。

但是，当我仅翻转文本时，图像不会改变。这是错误的，我希望它的行为与前面的例子类似。

我正在使用.span4 .jobimage，因为.jobimage位于div .span4内。我认为这样可以解决问题，但我无法让它发挥作用。

如果可能的话，我想用CSS做这个，而不是Javascript，但如果没有其他方法，那么Javascript就可以了。任何帮助将不胜感激。

Answer 1

您可以将悬停应用于顶级范围，而不是其中的项目，例如。

.span4:hover a {
  color: magenta;
  text-decoration: none;
}

.span4 .jobimage {
  display: inline-block;
  position: relative;
}

.span4 .jobimage:after {
  opacity: 0;
}

.span4:hover .jobimage:after {
  content: '';
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: magenta;
  opacity: 0.5;
}

这种方式悬停在该div中的任何位置都将应用洋红色。似乎在这里工作 - https://jsfiddle.net/w2fkv9b1/

将鼠标悬停在div上并将背景颜色应用于另一个div

1 个答案: