当我切换类时，图标堆叠在一起

Question

我想更改＆＃39;搜索＆＃39;到＆＃39; X＆＃39;使用toggleClass时。我尝试使用opacity和z-index，但它不起作用。

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据我的理解，你在#search元素中设置了一个图像，在这种情况下，html将显示所述图像并同时将#search的背景设置为'x.png'。