html - CSS :hover wont work if there's an absolute div behind it?

Question

footer {
  width: 960px;
  height: 100px;
  background-color: #121212;
  line-height: 100px;
  color: white;
  font-size: 10px;
  position: relative;
}

#copyright {
  margin-left: 3%;
  opacity: 0.4;
}

#icon {
  background-image: url('../img/icon.png');
  background-repeat: no-repeat;
  width: 85px;
  height: 86px;
  opacity: 0.050;
  position: absolute;
  right: 0;
  margin-top: 7px;
  margin-right: 5px;
  display: block;
}

#top {
  background-image: url('../img/backtop.png');
  background-repeat: no-repeat;
  width: 29px;
  height: 29px;
  margin-top: 4%; 
  margin-right: 6%;
  float: right;
}

#top:hover {
  background-image: url('../img/tophover.png');
  background-repeat: no-repeat;
  width: 29px;
  height: 29px;	
}

<footer>
  <div id="top"></div>
  <span id="copyright" class="left_content">GGLex is copyrighted &copy 2014, All rights reserved.</span>
  <div id="icon"></div>
</footer>

它的样子:

_{(来源:gyazo.com)}

我正在尝试在页脚右侧添加一个淡出图标。我做到了，效果很好，但是当我尝试通过悬停添加回到顶部按钮时，它失败了。

基本上，当我悬停时，它不会工作，但如果我删除 div“图标”，它会很容易工作(悬停)。

为什么会发生这种情况以及如何让它发挥作用？

Answer 1

不幸的是，当 css 样式重叠时，有时会发生这种情况。您可以使用 javascript 来解决这个...

onmouseover="window.location='URL HERE'"
Example
<div onmouseover="window.location='URL HERE'"></div>

希望这对您有所帮助，如果这不起作用或您需要更多帮助，请回复

下面的作品...

 <footer>
 <div id="top"></div>
 <span id="copyright" class="left_content">GGLex is copyrighted &copy 2014, All rights reserved.</span>
 <div id="icon" onmouseover="window.location='URL HERE'"></div>
 </footer>

URL 到页面顶部。标识页面顶部的任何元素，例如 id="top"然后将 URL 替换为 www.YOUR_WEB_NAME.CO.UK/#top