在Internet Explorer中移動鼠標后顯示的圖標

Question

我有一個搜索框，在該搜索框上我可以隱藏和顯示兩個類，一個用於搜索圖標圖像，另一個用於十字圖標圖像，如下所示：

<span id="search-icon" class="search-icon"></span>
    <input type="text" id="txtABFSearch" class="form-control mt17 right search-header form-control-header" maxlength="500" autocomplete="off" placeholder="Search Franchisee" />
    <div id="dvSearchResults" style="display: none;">

我在JS中所做的是，當從搜索圖標范圍中刪除用戶鍵入搜索圖標類並添加十字圖標類時，如下所示：

$('#txtABFSearch').keyup(function (e) {
    var searchString = $('#txtABFSearch').val();
    if (jQuery.trim(searchString).length >= 1) {
        if (searchString != '') {
           $("#search-icon").addClass("cross-icon");
        $("#search-icon").removeClass("search-icon");
        }
    }

});

一切在其他瀏覽器（如chorme firefox）上都可以正常工作，但在IE中，當我鍵入圖標時，只有將鼠標移到它上方時，它才顯示。

請查看這兩張圖片。 搜索之前搜索 之后我的IE版本是11.309.16299.0，而我的jquery版本是3.3.1

Answer 1

Internet Explorer不支持您的代碼。 也嘗試使用前綴。

<meta charset="UTF-8">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->