CSS On Hover Fade in another Div答案

【问题标题】：CSS On Hover Fade in Another DivCSS On Hover Fade in another Div
【发布时间】：2016-09-09 04:55:03
【问题描述】：

.currently_playing {
	float:left;
	width:250px;
	height:450px;
}
.currently_playing .cover {
	float: left;
	margin: 20px 20px 5px 20px;
	height: 210px;
	width: 210px;
	position: relative;
}
.currently_playing .cover img {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
.currently_playing .cover .controls {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 9999;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.currently_playing .cover .controls:hover {
	background: rgba(0, 0, 0, 0.75);
}
.currently_playing .cover .controls .scale {
	display:none;
	position: absolute;
	top: 50%; left: 50%;
	margin:-15px 0 0 -15px;
	height: 30px;
	width: 30px;
	background:url(http://i743.photobucket.com/albums/xx78/MrTIMarshall2512/artwork_scale_zps1ztoz3qv.png) no-repeat;
	cursor: pointer;
}
.currently_playing .cover .controls:hover .scale {
	display:block;
	-webkit-transition: all 4.3s ease-in-out;
    -moz-transition: all 4.3s ease-in-out;
    -o-transition: all 4.3s ease-in-out;
    transition: all 4.3s ease-in-out;
}

<div class="currently_playing">
    <div class="cover">
        <div class="controls">
            <div class="scale"></div>
        </div>
        <img src="http://www.at40.com/cimages/var/plain_site/storage/images/repository/news/music-news/new-album-art-released-for-bruno-mars-unorthodox-jukebox/224005-1-eng-US/New-Album-Art-Released-For-Bruno-Mars-Unorthodox-Jukebox.jpg" alt="Bruno Mars, Unorthodox Jukebox album artwork">
    </div>
</div>

我目前已经完成这项工作，因此当将鼠标悬停在专辑插图上时，它会以轻松的效果变暗，但缩放按钮只是简单地出现，反之亦然。

有没有办法让它在悬停时，比例元素似乎淡入？

【问题讨论】：

标签： css

【解决方案1】：

display none 不使用不透明度设置动画

.currently_playing {
	float:left;
	width:250px;
	height:450px;
}
.currently_playing .cover {
	float: left;
	margin: 20px 20px 5px 20px;
	height: 210px;
	width: 210px;
	position: relative;
}
.currently_playing .cover img {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
.currently_playing .cover .controls {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 9999;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	background: rgba(0, 0, 0, 0.75);
  opacity: 0;
}
.currently_playing .cover .controls:hover {
   opacity: 1;
}
.currently_playing .cover .controls .scale {
	position: absolute;
	top: 50%; left: 50%;
	margin:-15px 0 0 -15px;
	height: 30px;
	width: 30px;
	background:url(http://i743.photobucket.com/albums/xx78/MrTIMarshall2512/artwork_scale_zps1ztoz3qv.png) no-repeat;
	cursor: pointer;
}

<div class="currently_playing">
    <div class="cover">
        <div class="controls">
            <div class="scale"></div>
        </div>
        <img src="http://www.at40.com/cimages/var/plain_site/storage/images/repository/news/music-news/new-album-art-released-for-bruno-mars-unorthodox-jukebox/224005-1-eng-US/New-Album-Art-Released-For-Bruno-Mars-Unorthodox-Jukebox.jpg" alt="Bruno Mars, Unorthodox Jukebox album artwork">
    </div>
</div>

【讨论】：

谢谢，我不知道这个！