Question

我试图让自己的简单循环过渡悬停。我到目前为止：

aside{
    width:183px;
    height:183px;
    position:absolute;
    text-align:center;
    border-radius:600px;
    -moz-border-radius:600px;
    border:10px #fff solid;
    overflow:hidden;
    cursor:pointer;
    background:#fff;
    box-shadow: 1px 1px 5px 2px #888888;
    -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
}

aside:hover{
    -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
    border-color:#ccc;
}

aside img{
    width:183px;
    height:183px;
    position:absolute;
    border-radius:600px;
    -moz-border-radius:600px;
    top:0;
    left:0;
    margin:0;
    opacity:1;
    -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
}
aside:hover img{
    opacity:0.5;
    width:165px;
    height:165px;
    top:10px;
    left:10px;
    -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
}

aside h2{
    position:absolute;
    z-index:200;
    bottom:0;
    width:183px;
    margin:0;
    padding:5px 0 10px 0;
    color:#fff;
    text-transform:uppercase;
    font-size:14px;
    font-weight:bold;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    background:#333;
}

<aside class="courses">
<a href="http://www.google.com">
    <h2>Courses</h2>
    <img src="http://placehold.it/183x183" alt="" />
</a>
</aside>

在Firefox中按预期工作，但在Chrome（mac）上，h2元素仅在悬停时出现在容器上的border-radius溢出之外。

任何针对此的解决方法的想法保持纯CSS？

提前致谢

Pat

Answer 1

我找到了解决这个问题的方法 - 将图像放在div容器的背景中而不是html中的块元素...

在Chrome中悬停时，定位元素会显示在容器外部

1 个答案: