css/Extjsを使用して、他の要素にカーソルを置いたときに要素を表示する方法

Question

私のアプリケーションにはextjsが使用されています。コンテナにカーソルを合わせると、divの中にspanというラップされた設定アイコンが表示されます。ここでのコードは次のとおりです。

CSS：

<div class="cont"> 
    <span class="icon"></span> 
</div> 

私はホバー状態を処理するためのCSSの方法を使用してみました

.cont:hover .icon{ 
    color: #000000; 
} 
.icon{ 
    background-image: url(icon.png) !important; 
    background-position: 0px -3px; 
    width: 16px; 
    height: 16px; 
    position:absolute; 
    background-repeat: no-repeat; 
} 

をしかし、上記のコードはかなり私のために動作しません。期待どおりにホバリングを適用する、extss/jsのCSSまたはより良い方法で間違っていることがありますか？

ありがとうございます！

Answer 1

.cont { 
    color: #00FF00; 
} 
.cont:hover { 
    color: #000000; 
} 
.cont:hover .icon{ 
    display: block; 
} 
.icon{ 
    display: none; 
    background-image: url(icon.png) !important; 
    background-position: 0px -3px; 
    width: 16px; 
    height: 16px; 
    position:absolute; 
    background-repeat: no-repeat; 
} 

Answer 2

.cont{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color:lightgray; 
 
    border-radius:10px; 
 
    border:1px solid gray; 
 
    position:relative; 
 
    color:white; 
 
    } 
 
.icon{ 
 
    background-image: url('http://www.chaosads.ph/images/icons2/wrench-screwdriver.png'); 
 
    width: 16px; 
 
    height: 16px; 
 
    position:absolute; 
 
    background-repeat: no-repeat; 
 
    position:absolute; 
 
    right:5px; 
 
    top:5px; 
 
    visibility:hidden; 
 
} 
 

 
.cont:hover .icon{ 
 
    visibility:visible; 
 
} 
 
.cont:hover{ 
 
    color:black; 
 
}

<div class="cont"> 
 
    <span class="icon"></span> 
 
    textexttext 
 
</div>