html - 删除文件上传内容并在指向圆圈中间的文本时悬停

Question

如何删除 fileUpload 内容并使用圆形上传图像？然后，当我指向中间文本时没有悬停。如何解决？下面是下面的编码。

      <div class="small-12 medium-2 large-2 ">
           <asp:FileUpload ID="FileUpload2" runat="server" CssClass="profile-pic upload-button circle d-flex mx-auto mb-4 "/>
           <div class=" centered">Upload Profile Picture</div> 
      </div>

    .profile-pic {
        max-width: 222px;
        max-height: 222px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .file-upload {
        display: none;
    }
    .circle {
        border-radius: 50%;
        overflow: hidden;
        width: 228px;
        height: 228px;
        border: 8px solid #dbdbdb;
        
        top: 72px;
        transition: all .3s;
    }

    .circle:hover {
      background-color: #909090;
      cursor: pointer;
    }
    img {
        max-width: 100%;
        height: auto;
        min-width: 212px;
        min-height: 212px
    }
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

标签： htmlcssasp.net