Zインデックス適用divにホバー効果を適用するにはどうすればよいですか？

<html> 
<head> 
<title>HOver</title> 
<style> 
    .1 { 
     position:fixed; 
     top:0; 
     hieght:100; 
     width:100; 
    } 
    .2 { 
     position:relative; 
     top:0; 
     Z-index:9999; 
     hieght:100; 
     width:100; 
     background-color:white; 
    } 
    .2:hover { 
     background-color:black; 
     color:white; 
    } 
</style> 
</head> 
<body> 
<div class="1">fdigiuguisagcuiagi</div> 
<div class="2">cuoisgdcahouio</div> 
</body> 
</html>

このコードでは、ホバーが機能していません。 Z-indexを削除すると、ホバーが機能しています。Zインデックス適用divにホバー効果を適用するにはどうすればよいですか？

このコードにどのようにホバーを適用できますか？

出典

2017-08-29 Shaik

文字の代わりの番号にあなたのクラスを変更してくださいので、あなた.oneと.twoと言うことができます – RasmusGlenvig

number classesうまくいきません – masterpreenz

javascript、onmouse enterを使用してください。マウスオーバーは、Zインデックスの上位レイヤを持つ要素の後ろまたは下にある要素では機能しません。 – bdalina

ここでもう一度チェック

.first { 
 
     position:fixed; 
 
     top:0; 
 
     height:100; 
 
     width:100; 
 
     color:blue; 
 
     z-index:99999; 
 
    } 
 
    .second { 
 
     position:relative; 
 
     top:25px; 
 
     z-index:9999; 
 
     height:100px; 
 
     width:100px; 
 
     background-color:red; 
 
    } 
 
    .third { 
 
     position:relative; 
 
     top:50px; 
 
     z-index:9999; 
 
     height:500px; 
 
     width:500px; 
 
     background-color:green; 
 
    } 
 
    .second:hover,.third:hover { 
 
     background-color:black; 
 
     color:white; 
 
    }

<div class="first">fdigiuguisagcuiagi</div> 
 
<div class="second">cuoisgdcahouio</div> 
 
<div class="third">cuoisgdcahouio</div>

出典

2017-08-29 08:07:17 Gattbha

ありがとうございます。ここでは2つのdivしか持っていません。ヘッダーを固定してウェブサイトを作成すると、その時点で他のすべてのdivにz-indexを適用する必要があります。その場合、残りのdivにはホバーは適用されません。 – Shaik

https://jsfiddle.net/rxkf456n/このフィドルをチェックすると、他のdivとその仕事にZ-インデックスを削除することができます – Gattbha

ありがとうございます、その作業.. – Shaik

あなたのエラーを修正して、コードが動作します：

<html> 
 
<head> 
 
<title>HOver</title> 
 
<style> 
 
    /*error class name should not start with a digit*/ 
 
    .div-1 { 
 
     position:fixed; 
 
     top:0; 
 
     height:100px;/*misspelling - hieght*/ 
 
     width:100px;/*you must specify the measurement unit px, %, em, rem, vh, vw*/ 
 
    } 
 
    .div-2 { 
 
     position:relative; 
 
     top:0; 
 
     /*Z-index:9999;*/ 
 
     height:100px; 
 
     width:100px; 
 
     background-color:white; 
 
    } 
 
    .div-2:hover { 
 
     background-color:black; 
 
     color:white; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
<div class="div-1">fdigiuguisagcuiagi</div> 
 
<div class="div-2">cuoisgdcahouio</div> 
 
</body> 
 
</html>

出典

2017-08-29 08:12:51 kizoso

Zインデックス適用divにホバー効果を適用するにはどうすればよいですか？

答えて

関連する問題