ここ

2017-11-29 11 views
0

を反応させるのにJSSにCSSのオーバーレイ機能を変換しようとすると、私が変換しようとしているCSSです:ここ

.container { 
    some CSS in here - figured that out 
} 



.overlay { 
    some CSS i can convert - not sure on below line 
    transition: .5s ease; 
} 

これは私が最もここ

.container:hover .overlay { 
    height: 100%; 
} 

に苦しんでいCSSが私ですJSS - それはホバー効果に来るときに動作していないされています

container: { 
    position: 'relative', 
    width: '100%', 
    '&:hover, &:overlay': { 
     height: '100%', 
     border: 'solid red' 
    } 
    }, 
    overlay: { 
    position: 'absolute', 
    bottom: 0, 
    left: 0, 
    right: 0, 
    backgroundColor: '#008CBA', 
    overflow: 'hidden', 
    width: '100%', 
    height: 0, 
    transition: ['.5s', 'ease'] 
    }, 

私は.containerを変換する方法を見つけ出すことはできません。ホーブr。オーバーレイ部分?私はJSS遊び場で検索し、どこにも行けませんでした。私はそれが単純にネストされた問題だと思っていましたが、もっと明白なものかもしれません。あまりにも長い間同じ問題を見つめているだけです。

+0

インラインスタイルは、擬似クラスまたは擬似要素を標的とするために使用することはできません。あなたはスタイルシートを使う必要があります。ここをクリックしてください:https://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react –

+1

[ReactのCSS擬似要素]の可能な複製(https://stackoverflow.com/questions/28269669/css-反応中の疑似要素) –

答えて

0

あなたは「&を:ホバー$オーバーレイ」したい