标题属性在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>