Question

我觉得这并不难，但我似乎无法弄明白。当我将鼠标悬停在图像上时，我主要遇到问题。这就是我想出来的

.box {
color: #212121;
padding: 0;
float: left;
margin: 5px;
width: 225px;
height: 85px;
background: #ffffff;
}

.box img{
text-align: center;
width: 75px;
height: 75px;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
}

.box img:hover .circle{
opacity:0.5;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
 }

.circle{
position: absolute;    
text-align:center;
width:30px;
height:30px;
background-color:#fff;
font-family: calibri;
font-size:18px;
line-height:28px;
padding:15px;
margin: -70px 8px;
opacity:0;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
}

Answer 1

您的主要问题是，由于img是一个自包含的元素，您希望.circle作为孩子img是不可能的。

就你的HTML是否正确而言：

<div class="box">
    <img src="self.jpg" alt="" />
    <div class="circle"></div>
</div>

你的CSS应该更像下面的内容。您应该将:hover声明移至.box，以便圆圈（现在是直接子节点）可用。其他样式问题并不是真正相关的，而是您想要实现的目标

.box {
    color: #212121;
    padding: 0;
    float: left;
    margin: 5px;
    width: 225px;
    height: 85px;
    background: #ffffff;
}

.box img {
    text-align: center;
    width: 75px;
    height: 75px;
    -moz-transition-duration:0.6s;
    -webkit-transition-duration:0.6s;
    -o-transition-duration:0.6s;
}

.circle {
    position: absolute;    
    text-align:center;
    width:30px;
    height:30px;
    background-color:#fff;
    font-family: calibri;
    font-size:18px;
    line-height:28px;
    padding:15px;
    margin: -70px 8px;
    opacity:0;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-transition-duration:0.6s;
    -webkit-transition-duration:0.6s;
    -o-transition-duration:0.6s;
}

.box:hover .circle {
    opacity:0.5;
    -moz-transition-duration:0.6s;
    -webkit-transition-duration:0.6s;
    -o-transition-duration:0.6s;
}

不透明度变化和圆形叠加的图像？

1 个答案: