Question

我正在尝试根据这里的代码创建一个创建CSS翻转动画：http://davidwalsh.name/css-flip但是我还想让翻页背面的整个div成为一个链接，我在答案中找到了@thepeer：https://stackoverflow.com/a/3494108/1818828 * /

我把它们放在这个jsfiddle中：http://jsfiddle.net/gmdavis62/PB7j8/14/ （注意到目前为止仅针对webkit进行了测试/设计）

.link{    /*Important:*/
    height:160px;
    width:160px;
    position:relative;
}
.back a span{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0px;
  z-index: 1;
}

我的问题是在翻转侧（悬停在图像上方）链接仅覆盖div的右半部分。我试过调整宽度和左边的属性没有效果。我也尝试移动空跨度并链接到其他内容之外而不做任何更改。

我的div有一个CSS红色轮廓，所以我可以看到它们在哪里，除了.link被偏移之外，它没有解释链接被关闭。这里发生了什么？

Answer 1

h4标题有一个默认的margin-top。将它设置为0，你就没事了。小提琴：http://jsfiddle.net/PB7j8/20/

h4
{
    margin-top: 0;
}

div链接只覆盖div的一半

1 个答案: