Question

我有这段代码

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front" style="background: url(games/racegame/foto/fotozonder.PNG) 0 0 no-repeat;">
        </div>
        <div class="back" style="background:#00B9FF;>
            <a href="http://ispeedzone.com" rel="nofollow"></a>
        </div>
    </div>
</div>

所以当鼠标在它上方移动时，它翻转180°，所以我看到后面。但我想做的是当鼠标悬停并且你可以看到背面时，你可以点击，在这种情况下转到ispeedzone.com 有人知道怎么做吗？

Answer 1

如果你提供一个jsfiddle或类似的话，这肯定会更容易。但是你可以做的只是使用position：relative来使锚标签跨越整个宽度;在其父div上，然后使用position：absolute;和上/右/下/左：0。

或者，如果宽度/高度已知，只需在锚标记上使用显示块并设置其宽度高度以匹配父div。

我认为如果标记为空，IE中可能会出现一些问题，但是你可以通过在锚标记内添加一些虚拟文本来绕过它，并将其text-indent属性设置为像-100000px这样疯狂的东西，使文本非可见。

Answer 2

试试这个：

.flip-container {
	perspective: 1000;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
	transform: rotateY(0deg);
    background: orange;
}

.back {
	transform: rotateY(180deg);
    background: yellow;
}
   
.back a {
  display: block;
  width: 100%;
  height: 100%;
}

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
	transform: rotateY(180deg);
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			hover to see back
		</div>
		<div class="back">
            <a href="http://ispeedzone.com" target="_blank">http://ispeedzone.com</a>
		</div>
	</div>
</div>

JSFiddle演示：http://jsfiddle.net/67ad9e8h/

单击带有href的div框

2 个答案: