css中img标签这种hover效果怎么实现？

来自版块: Discuz教程发表于: 2020-4-13 09:56:53

20806

有图片的时候，hover时提示更换图片，没有图片的时候则没有hover效果

使用CSS实现了上面的效果，代码如下：

<a class="upload-content" href="javascript:;">
<input type="file" id="ipt_carouselConfig_fileuploadBox1" name="ipt_carouselConfig_fileuploadBox" style="display: none"/>
<img src="" class="carousel-pic" alt="立即上传" name="img_carouselConfig_pic"></img>
<div id="div_carouselConfig_carouselhover1" name="div_carouselConfig_carouselhover" class="carousel-hover">更换图片</div>
</a>
.carousel-pic{
width: 140px;
height: 78px;
line-height: 78px;
vertical-align: middle;
}
.carousel-hover{
display: none;
position: absolute;
left: 28px;
top: 49px;
width: 140px;
height: 36px;
line-height: 36px;
color: #48bed1;
background-color: #efefef;
}
.upload-content {
display: block;
}
.upload-content:hover > .carousel-hover{
display: inline-block;
}
.upload-content > img[src=""] + .carousel-hover{
display: none !important;
}