ホバーのdivを超えると

Question

私のコードはここにある別のdivに背景色を適用する... https://jsfiddle.net/1r9me7rc/2/

だからこれは私が画像をロールオーバーするとき、それは50％のマゼンタとテキストを着色ます...私が望む外観ですマゼンタに変更されます。すばらしいです。

ただし、のテキストを転記すると、の画像は変わりません。これは間違っており、前の例のように動作するようにします。

.jobimageは.span4の中にあるので、.span4 .jobimageを使用しています。私はそれがトリックをするだろうと思ったが、私はそれを働かせることができない。

可能であれば、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/