CSSは左側のサイドバーではなく上部バーで動作します

下のコードは上のバーで機能していますが、左のバーでは機能しません。CSSは左側のサイドバーではなく上部バーで動作します

#one { 
 
    display: block; 
 
    background-color: red; 
 
} 
 
#two { 
 
    opacity: 0; 
 
    background-color: green; 
 
    position: relative; 
 
    top: -34px; 
 
} 
 
#two:hover { 
 
    opacity: 1; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="hov.css"> 
 
</head> 
 

 
<body> 
 
    <div id="one"> 
 
    <p>mango</p> 
 
    </div> 
 
    <div id="two"> 
 
    <p>apple</p> 
 
    </div> 
 
</body> 
 

 
</html>

マンゴーが上にマンゴーが左側にあるとき、それは動作しません場合は、上記のコードは動作します。

出典

2016-08-12 Dream Hunter

あなたがデザインする方法画像を追加することができますか？ – Maharajan

#one { display：block; 背景色：赤; 幅：10％; 高さ：100％; } #two { 不透明度：0; 幅：20％; 高さ：100％; 背景色：緑; 位置：相対; top：-34px; } –

あなたはこのをお探しですか？

#one { 
 
    width:100px; 
 
    display: block; 
 
    background-color: red; 
 
} 
 
#two { 
 
    opacity: 0; 
 
    background-color: green; 
 
    position: relative; 
 
    top: -34px; 
 
    margin-left:100px; 
 
} 
 
#two:hover { 
 
    opacity: 1; 
 
}

<div id="one"> 
 
    <p>mango</p> 
 
    </div> 
 
    <div id="two"> 
 
    <p>apple</p> 
 
    </div>

出典

2016-08-12 04:39:00

サイドバーはどこですか？ブロックする容器は2つしかありません。

#one { 
 
    display: block; 
 
    background-color: red; 
 
} 
 
#two { 
 
    opacity: 0; 
 
    background-color: green; 
 
    position: relative; 
 
    top: -34px; 
 
} 
 
#two:hover { 
 
    opacity: 1; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="hov.css"> 
 
</head> 
 

 
<body> 
 
    <div id="one"> 
 
    <p>mango</p> 
 
    </div> 
 
    <div id="two"> 
 
    <p>apple</p> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-08-12 04:35:32 kapil

いくつかのパーセンテージ値（幅nの高さ）でそれを行いたい –

#one {display：block;背景色：赤;幅：10％;高さ：100％; } #two {不透明度：0;幅：20％;高さ：100％;背景色：緑;ポジション：相対; top：-34px; } –

CSSは左側のサイドバーではなく上部バーで動作します

答えて

関連する問題