Question

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


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

它看起来像什么：

img http://gyazo.com/08f0742032b0111354d985e158d2b9f5.png

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

基本上，当我悬停时，它不会工作，但是如果我删除div＆＃34; icon＆＃34;，它将很容易（悬停）。

为什么会发生＆amp;我怎样才能让它发挥作用？

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>

网址返回页首。识别页面顶部的任何元素，例如id =“top”，然后将网址替换为www.YOUR_WEB_NAME.CO.UK/#top

Answer 2

您可以尝试将pointer-events: none;添加到绝对定位的元素中。这样，点击/“指针事件”可以“通过”，从而影响其背后的元素。

CSS：如果有一个绝对的div背后，悬停不会工作？

2 个答案: