How can I fix that hover?

Hi everyone ! I looked for the solution to the problem on the Internet but I couldn’t find it.

When you hover over (YAPIMCISINDAN MMORPG ) with the mouse cursor, the hover codes of the category below work. (Albion Online Category)

How can I prevent this from happening?

/* kategori */
body .category-list [data-category-id="37"],body .category-list [data-category-id="37"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="37"]::after {
    content: "▼ YAPIMCISINDAN MMORPG";
}
body [data-category-id="37"]::after,body [data-category-id="37"]::after {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: rgb(247, 247, 255,.9);
    border-left: 3px solid #e53967;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #36364d;
}

body [data-category-id="31"]::after,body [data-category-id="31"]::after {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: rgb(247, 247, 255,.9);
    border-left: 3px solid #e53967;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #36364d;
}

body .category-list [data-category-id="31"],body .category-list [data-category-id="31"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="31"]::after {
    content: "▼ PRIVATE SERVER MMORPG";
}
/* kategori */

You could add pointer-events: none to the after element to stop the hover being activated.

e.g.

body [data-category-id]:after {
    pointer-events:none;  
}

That assumes that you only use that data-category-id in the same format throughout.

You’re perfect my friend. Thank you :pray:

1 Like