標題屬性在IE11中不起作用

Question

嗨，我只是想問一下我的程序出了什么問題。 我在做這個程序，我必須選擇一個文件。 但是按鈕是圖像，我想添加一個工具提示，該圖像用於選擇文件。 此代碼塊在chrome中可以完美地工作。 但是，當我在IE11中運行它時，標題“選擇文件”未顯示在IE11中。 我不知道IE有很多限制。 與鉻不同。

  .image-upload>input { visibility: hidden; width: 0px; height: 0px; margin: -10%; } div.item { vertical-align: top; display: inline-block; text-align: center; width: 250px; img { width: 90px; height: 50px; } .caption { display: block; color: white; } div.space { margin-top: -15px; } 

 <div class="image-upload"> <label for="file-input"> <p align="left"><font face="Arial" color="black" size = "5"><b>&nbsp&nbsp&nbspSelect File&nbsp&nbsp&nbsp </b><span style="cursor:pointer" alt="Select File" title="Select File"> <img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p></label> </label> <input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required> </div> 

Answer 1

如果您希望能夠將pointer-events:none的內聯樣式懸停在image標記上，則無需將其刪除。

如果將其設置為none，則意味着您的鼠標無法與該元素進行交互，因此無法將其懸停以顯示標題。

嘗試這個：

<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico"  id="img" title="Select File"/>

顯示和不顯示指針事件的示例小提琴

有關指針事件的更多信息

另請注意您的代碼存在以下錯誤：

• 字體標簽已過時，不應使用-改為使用CSS
• ＆  之后應帶有半冒號：  
• 還有一個額外的結束標簽，我認為您內部不允許使用p標簽-使用驗證器檢查您的代碼

 <div class="image-upload"> <p align="left"><label for="file-input"><b>&nbsp;&nbsp;&nbsp;Select File&nbsp;&nbsp;&nbsp; </b> </label></p> <span style="cursor:pointer; display:inline-block;" alt="Select File" title="Select File"><label for="file-input"><img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/> </label></span> <input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required> </div> 

Answer 2

您可以添加另一個span （例如），為其賦予絕對位置，然后將鼠標懸停在圖像上，將其顯示。

您還可以使用javascript（jquery）將其顯示在與光標相同的位置，但這有點復雜。

看看下面這是否是您想要的

 .title { transition: 0.3s ease-out; opacity: 0; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); font-size: 15px; background: #fff; } .wrapper { display: inline-block; position: relative; } .wrapper:hover .title { opacity: 1; } 

 <div class="image-upload"> <label for="file-input"> <p align="left"><font face="Arial" color="black" size="5"><b>&nbsp&nbsp&nbspSelect File&nbsp&nbsp&nbsp </b> <span class="wrapper" style="cursor:pointer" alt="Select File" title="Select File"> <span class="title">Select File</span> <img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p> </label> </label> <input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required> </div>