CODEWITHSUNDEEP
css
Lanti
Lanti

Reputation: 2329

button:hover:before not clickable in Firefox

This code works in Chrome, the cursor appears as a pointer and registering the click event as it should, but not in Firefox. Can you tell my why?

@import url('https://rawcdn.githack.com/WordPress/dashicons/242e2712334e30648b328e91c44366d55ef2146a/icon-font/css/dashicons.css');

button.slick-arrow,
button.slick-arrow:hover,
button.slick-arrow:focus {
    background: none !important;
    text-indent: initial;
    -webkit-font-smoothing: antialiased;
    vertical-align: top;
    font-size: 0;
    width: 0;
    height: 0;
    border: none;
}
button.slick-arrow:before {
    display: block;
    position: absolute;
    font: normal 32px/1 'dashicons';
    padding: 8px;
    opacity: 0.6;
    color: #000;
    cursor: pointer;
}
button.slick-arrow:hover:before {
    opacity: 1;
}
button.slick-prev:before {
    content: "\f341";
    left: 8px;
}
button.slick-next:before {
    content: "\f345";
    right: 8px;
}
<button class="slick-prev slick-arrow">Click me!</button>

Upvotes: 2

Views: 707

Answers (1)

NikxDa
NikxDa

Reputation: 4187

The issue lays within the positioning of your before element. Since it is positioned absolutely, and the button itself has it's width and height set to 0, the element size is zero, and you cannot interact with it.

To fix this, remove width: 0; and height: 0; from the button, and remove the position: absolute; from the :before-pseudo.

Additionally, add cursor: pointer; to your button.

@import url('https://rawcdn.githack.com/WordPress/dashicons/242e2712334e30648b328e91c44366d55ef2146a/icon-font/css/dashicons.css');

button.slick-arrow,
button.slick-arrow:hover,
button.slick-arrow:focus {
    background: none !important;
    text-indent: initial;
    -webkit-font-smoothing: antialiased;
    vertical-align: top;
    font-size: 0;
    border: none;
    cursor: pointer;
}
button.slick-arrow:before {
    display: block;
    font: normal 32px/1 'dashicons';
    padding: 8px;
    opacity: 0.6;
    color: #000;
}
button.slick-arrow:hover:before {
    opacity: 1;
}
button.slick-prev:before {
    content: "\f341";
    left: 8px;
}
button.slick-next:before {
    content: "\f345";
    right: 8px;
}
<button class="slick-arrow slick-prev">Click me!</button>

Upvotes: 2

Related Questions