将鼠标悬停在一个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/