how to show an element on hover over another element using css/Extjs

Question

I'm using extjs for my application. I want to show a setting icon which is a span wrapped inside the div when I hover over a container. here is the code:

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

I tried using the css way to handle the hover state:

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;
}

But the code above does not quite work for me. Is there something i'm doing wrong in the css or a better way in extjs/js that would apply the hover as expected?

Thanks!

Answer 1

 .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> 

Answer 2

.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; }