Question

如果我有这样的图标字体（\ f107）的css代码，但当我将鼠标悬停在它上面时，它不像整个搜索字段那样可点击？如果我需要点击它

#top .search_form .search-cat:after{
        content: "\f107";
        font-family: fontawesome;
        color: #e0e0e0;
        display: inline-block;
        font-size: 25px;
        line-height: 25px;
        position: absolute;
        right: 63px;
        top: 12px;
    }

    #top .search_form .search-cat select{
        border: 0;
        padding: 9px;
        margin: 0;
        color: #3d3d3d;
        width: 100%;
        height: 100%;
        background: transparent;
        appearance: none; 
        cursor: pointer;
        -webkit-appearance: none;
        -o-appearance: none;
        -moz-appearance:none; /* Firefox */
    }
    #top .search_form select::-ms-expand {
        display: none;
    }

    .search_form .button-search,
    .search_form .button-search2 {
        font-family: FontAwesome;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 2;
        cursor: pointer;
        font-size: 25px;
        line-height: 25px;
        font-weight: 400;
        color: #fff;
        padding: 15px 15px 13px 15px;
        margin: -3px -3px -3px 0;
        border-radius: 0 5px 5px 0;
        -webkit-transition: background .3s ease-in-out;
        -moz-transition: background .3s ease-in-out;
        -ms-transition: background .3s ease-in-out;
        -o-transition: background .3s ease-in-out;
        transition: background .3s ease-in-out;
    }

    .search_form .button-search:hover,
    .search_form .button-search2:hover {
        background-color: #939393
    }

        .search_form .button-search:before,
        .search_form .button-search2:before {
            content: "\f002";
        }

这里也是整个搜索字段的屏幕截图：

search field

Answer 1

在图标上使用 pointer-events：none CSS属性

#top .search_form .search-cat:after{
    content: "\f107";
    font-family: fontawesome;
    color: #e0e0e0;
    display: inline-block;
    font-size: 25px;
    line-height: 25px;
    position: absolute;
    right: 63px;
    top: 12px;
    pointer-events: none; /* Makes your icon transparent for clicks */
}

如何使图标字体（fontawesome）可点击

1 个答案: