javascript - 标题属性在IE11中不起作用

嗨，我只是想问一下我的程序出了什么问题。我在做这个程序，我必须选择一个文件。但是该按钮是图像，我想添加一个工具提示，该图像用于选择文件。此代码块在chrome中可以正常工作。但是当我在IE11中运行它时，标题“选择文件”未显示在IE11中。我不知道IE有很多限制。与 Chrome 不同。

  .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>

最佳答案

如果希望将鼠标悬停在图像标签上，则需要从其内联样式中删除pointer-events:none。

通过将其设置为none，这意味着您的鼠标无法与该元素进行交互，因此无法将其悬停以显示标题。

试试这个:

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

Example fiddle showing with and without pointer events

More information about pointer events

另外，请注意您的代码存在以下错误:

字体标记已过时且不应使用-使用css代替

＆nbsp之后应带有半冒号: 

还有一个额外的结束标签，我认为您内部不允许使用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>

关于javascript - 标题属性在IE11中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44653878/