[英]Title attribute not working in IE11
Hi I just want to ask what's wrong with my program. 嗨,我只是想问一下我的程序出了什么问题。 Im doing this program where I have to choose a file.
我在做这个程序,我必须选择一个文件。 But the button is an image and I would like to add a tooltip that this image is for selecting a file.
但是按钮是图像,我想添加一个工具提示,该图像用于选择文件。 This block of codes is perfectly working in chrome.
此代码块在chrome中可以完美地工作。 But when I run it in IE11 the title "Select File"is not showing in IE11.
但是,当我在IE11中运行它时,标题“选择文件”未显示在IE11中。 I didn't know that IE has a lot of restriction.
我不知道IE有很多限制。 Unlike in 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>   Select File    </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>
You need to remove the inline style of pointer-events:none
from the image tag if you want to be able to hover it. 如果您希望能够将
pointer-events:none
的内联样式悬停在image标记上,则无需将其删除。
By setting it to none, it means your mouse can't interact with the element and therefore it cannot hover it to show the title. 如果将其设置为none,则意味着您的鼠标无法与该元素进行交互,因此无法将其悬停以显示标题。
Try this: 尝试这个:
<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 有关指针事件的更多信息
Also please note the following errors with your code: 另请注意您的代码存在以下错误:
之后应带有半冒号:
<div class="image-upload"> <p align="left"><label for="file-input"><b> Select File </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>
you could add another span
( for example ), give it position absolute, and on hover on the image, show it . 您可以添加另一个
span
(例如),为其赋予绝对位置,然后将鼠标悬停在图像上,将其显示。
you can also you javascript ( jquery ) to show it in the same position your cursor is, but that's a bit more complicated. 您还可以使用javascript(jquery)将其显示在与光标相同的位置,但这有点复杂。
See below if this is what you want 看看下面这是否是您想要的
.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>   Select File    </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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.