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

问题描述

问 题

有图片的时候，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;
}

这篇关于css中，img标签这种hover效果怎么实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！