標題屬性在IE11中不工作

嗨，我只想問我的程序有什麼問題。我正在做這個程序，我必須選擇一個文件。但該按鈕是一個圖像，我想添加一個工具提示，該圖像用於選擇一個文件。這塊代碼完全適用於Chrome。但是當我在IE11中運行它時，標題「選擇文件」在IE11中沒有顯示。我不知道IE有很多限制。不像在鉻。標題屬性在IE11中不工作

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

來源

2017-06-20 M Pascual

是https://stackoverflow.com/questions/36606868/tooltip-using-title-attribute-in-ie-11適用？ – apokryfos

我的程序是關於執行python腳本，這就是爲什麼我使用php –

代碼中沒有任何與python或PHP相關的代碼 – mplungjan

你需要，如果你希望能夠盤旋它從圖像標籤去除pointer-events: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>

來源

2017-06-20 13:14:40 Pete

您可以添加另一個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"> 
 
\t \t <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>

來源

2017-06-20 13:15:03

標題屬性在IE11中不工作

回答

相關問題