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);
}

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

1 个答案: