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

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

Hover over a div and apply a background color to another div

html

css

hover