html - 一个元素的过渡不透明度和另一个相同大小的元素的旋转

Question

这个问题让我抓狂:

我正在尝试旋转一个元素的圆形边框，并且我想在用户将鼠标悬停在圆上时同时更改圆镶嵌的不透明度。我当前设置的问题只有不透明度在变化:

<div id="main-circle">
<a class="circle-container" href="#">
<div class="circle-border"></div>
<div class="image-overlay" style="background-image:url(http://manuel-haug.de/img/circle-placeholder.png)"></div>
<div class="circle-overlay"></div>
</a>
</div>

当我像这样改变元素的顺序时:

<div id="main-circle">
<a class="circle-container" href="#">
<div class="image-overlay" style="background-image:url(img/circle-placeholder.png)"></div>
<div class="circle-overlay"></div>
<div class="circle-border"></div>
</a>

边框在旋转，但嵌体不可见。

我的CSS代码:

.circle-container
{
    position: relative;
    left: 0px;
    top: 0px;
    -webkit-transform: translate3d(0px, 0px, 0px);
    width:156px;
    height:156px;
    overflow: hidden;
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;  
    margin: 0px 52px 60px 52px;
    float: left;
    cursor: pointer;
    display: block;
    z-index: 2;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.circle-border
{
    background:url(http://manuel-haug.de/img/circle-border.png) center center no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;

    text-align: center;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}
.circle-border:hover
{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg); 
    -o-transform:rotate(45deg);
}
.circle-overlay
{
    background:url(http://manuel-haug.de/img/circle-overlay.png) center center no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    zoom: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0);


    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;

}
.circle-overlay:hover
{
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}
.image-overlay
{
    overflow: hidden; 
    border-top-left-radius: 75px; 
    border-top-right-radius: 75px; 
    border-bottom-right-radius: 75px; 
    border-bottom-left-radius: 75px; 
    background-position: 50% 50%; 
    background-repeat: initial initial;
    width: 96%;
    height: 96%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 2%;
    left: 2%;
    text-align: center;
}

为了查看我的问题示例，我创建了一个 jsfiddle

希望有人能帮助我。

Answer 1

您在 .circle-border.. (.circle-border:hover) 悬停时旋转边框。

只需更改它，以便在将鼠标悬停在父元素上时旋转 .circle-border 的边框，在这种情况下，您将使用 .circle-container:hover .circle-border 。

Working Example

.circle-container:hover .circle-border {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}