为什么HOVER在正常图像背后的图像？

Question

我有悬停问题。我有一个普通的不透明照片和另一个白色背景。我这样做了：

HTML：

<div id="glob" style="margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;">
<img src="images/icon_globus.png" width="32" height="33" alt="" style="margin-right:5px;margin-top:7px;"/>
</div>

的CSS：

  #glob:hover{

   background:url('../images/icon_globushover.png') no-repeat;

  }

正如你从照片中看到的那样，白色的（上面的globus）在另一个后面。它不应该落后。

什么不好？

---

编辑：谢谢大家，它正在运作。我确实喜欢第一个答案。不知道为什么我用img标签。我总是使用div作为图像，但在这里我是愚蠢的。 非常感谢您的帮助！

Answer 1

因为背景始终具有所有元素的最低z-index，并且内容将位于其上。我建议你把“images / icon_globus.png”这个作为div glob的背景并删除那个图片标签。然后它应该按照你想要的方式工作。

Answer 2

尝试没有图像部分。

glob {
    background: url('icon_globus.png');
}
glob:hover {
    background: url('icon_globus_hover.png');
}

Answer 3

删除所有样式并更改如下

// CSS

glob:hover{background: url("/images/icon_globushover.png") no-repeat;}
.glob{
background: url("/images/icon_globus.png") no-repeat;
float: right;
margin: 0px 0px 15px 20px;
overflow: hidden;
padding: 0px;
width: 32px;
height: 33px;
}


<div class="glob"></div>

如果您的路径来源是这样的

myhardrive / MysiteFolder / Images /你的index.html在MysiteFolder中，所以css必须是(/images/)

如果您的路径来源是这样的

myhardrive / MysiteFolder / files / mystyle.css在这里("..\images\")

Answer 4

根据您要支持的浏览器，您可以在CSS中执行以下操作：

#glob { position: relative; }
#glob:hover:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1000;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background:url('../images/icon_globushover.png') no-repeat;
}

Answer 5

因为你的图片icon_globus.png高于你的div背景，所以当你悬停时，你实际上将背景应用到包含你的图像的容器，你的后面会出现globushover ..

试试这个： HTML：

<div id="glob></div>

的CSS：

#glob {margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;background:url('../images/icon_globus.png') no-repeat;}
#glob:hover{
   background:url('../images/icon_globushover.png') no-repeat;
  }

这样您可以更改/覆盖默认的背景图像。 css意味着级联风格，cascade允许你根据某种条件覆盖样式，这就是理论应用于此。只需在悬停时用另一个覆盖背景图像。