Question

您好，我只是想问一下我的计划有什么问题。我正在做这个程序，我必须选择一个文件。但是按钮是一个图像，我想添加一个工具提示，该图像用于选择文件。这段代码完全适用于chrome。但是当我在IE11中运行时，标题＆＃34;选择文件＆＃34;没有在IE11中显示。我不知道IE有很多限制。与铬不同。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果您希望能够悬停它，则需要从图片代码中删除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
＆amp; 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>

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>

标题属性在IE11中不起作用

2 个答案: