jquery - 当我切换类时，图标相互堆叠

Question

我想在使用 toggleClass 时将图标从“搜索”更改为“X”。我尝试使用 opacity 和 z-index，但它不起作用。

这是我的代码:

$(document).ready(function() {
    $('#search').click(function() { 
        $('.search-hide').fadeToggle();
        $('#search').toggleClass('activex');
    }); 
})

#search {
    cursor: pointer;
    z-index: 1000;
    position: absolute;
    right: 20px;
    opacity: 0.5;
}

.activex {
    width: 24px;
    height: 24px;
    background:url('x.png');
    z-index: 1001;
    position: absolute;
    opacity: 1;
}

Answer 1

据我所知，您已经在#search 元素中设置了一个图像，在这种情况下，html 将显示所述图像并同时将#search 的背景设置为“x.png”。