Question

我在我的应用程序中使用extjs。当我将鼠标悬停在容器上时，我想显示一个设置图标span包裹在div内。这是代码：

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

我尝试使用css方式处理悬停状态：

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

但上面的代码并不适合我。我在css中做错了什么，或者在extjs / js中有更好的方法可以按预期应用悬停？

谢谢！

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何使用css / Extjs显示悬停在另一个元素上的元素

2 个答案: