Question

我想要的是：在悬停时，图块分为两个图块，然后两个图块都作为单独的链接工作。瓷砖也应该在悬停时改变背景颜色。

为实现这一目标，我将两个div（toptile和bottomtile）叠加在一起。在悬停时，toptile变为不可见，可以看到bottomtile，其中包含两个div，每个div包含一个超链接。

<div class="tile">
    <div class="bottomtile">
        <div class="linktile"><a href="page1.php">ONE</a></div>
        <div class="linktile"><a href="page2.php">TWO</a></div>
    </div>
    <div class="toptile">HELLO</div>
</div>

CSS：

.tile{
    width: 200px;
    height: 200px;
    position: relative;
}

.bottomtile {
    position: absolute;
    width: 200px;
    height: 200px;
}

.toptile {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
}

.toptile:hover {
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}

.linktile{
    height: 95px;
    width: 200px;
    background-color: blue;
    top: 0;
    left: 0;
}

.linktile:hover{
    background-color: yellow;
}

不幸的是，.linktile:hover中的背景更改和超链接都不起作用。我可以看到单词“ONE”和“TWO”这两个词，但它就像是我在空盘子里盘旋。我的假设是toptile就像一个透明的玻璃平面，在那里我可以看到bottomtile，但实际上并没有用鼠标到达它。

我还在visibility: hidden括号内尝试了display: none和.toptile:hover，但问题保持不变。

有没有办法让悬浮物在悬停时完全消失？还是另一种解决这个问题的方法？

Answer 1

在:hover上使用.tile代替.toptile

.tile:hover .toptile{
  /* your code to hide .toptile */
}

你的假设是正确的。它位于.bottomtile之上，因此您无法与.bottomtile进行互动。如果你完全让.toptile消失，那么你的鼠标就不会徘徊在它上面。

Answer 2

这是因为你声明了这个

.toptile:hover {
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}

因为你正在使用opacity: 0，它看起来似乎不再存在，但事实是.toptile仍然存在，但看不见，所以你真正在盘旋的仍然是.toptile而不是.linktile，这就是background .linktile永不改变的原因。您需要的是使用display: none，.toptile也不是.bottomtile的父级，所以当.toptile消失时，它不会再悬停在它上面了，所以它会重新出现并再次消失，所以你需要将选择器改为.tile:hover .toptile，这里改变的css应该是

.tile:hover .toptile {
    display: none;
}

这是工作Fiddle

Answer 3

Luud带你去那里。这是一个想法的工作笔，其中一些不需要的标记已经消失。

http://codepen.io/justindunham/pen/sCzcH

.bottomtile .linktile {
  opacity: 0;
}

.bottomtile:hover .linktile {
  opacity: 1;
}

两个div叠在一起 - 底部div上的链接不可点击

3 个答案: