Geek asks and answers

CSS buttons - unavailable from time to time?

I have several snap elements. Clicking on them once does nothing, all CSS animations work, but links don't open any pages / don't trigger any actions. I need to move the cursor a bit and then click again.

I am sure this is a problem with CSS, but I cannot find something wrong in my CSS. I think the problem may lie in the fields (4px bottom edge of BUT 4px top margin on: active), but I saw this on many websites, and the buttons worked fine ...

Here are the buttons. Click on them, about one of the 20 clicks does not work (sometimes this happens the first time you click):

http://jsfiddle.net/4nz4v/ (note how buttons do not get the active class after clicks, tested it both in the latest Opera and in Chrome)

Here's the CSS:

.button {
    display: inline-block;
    vertical-align: top;
    color: #000;
    background: #aaa;
    text-shadow: 1px 1px 1px #fff;
    border: 0;
    padding: 0.6em 1.2em;
    margin: 0 0 4px 0;
    text-decoration: none;  
    border-radius: 6px;
}

.button:hover {
    color: #fff;
    text-shadow: none;
}

.button:active {
    margin: 4px 0 0 0;
}

.active {
    background: #fff;
    text-shadow: none;
    color: #000;
}

Thank.

+5
source share
3 answers

As you suspected, this looks like a margin problem.

.button:active {
    margin: 4px 0 0 0;
}

Removing the above code fixes the problem. I would remove this code and add a parent element to it to get more consistent results.

+1
source

Solution found: use mouseupor mousedowninstead click:

$('.button').mouseup(function () {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
});

http://jsfiddle.net/4nz4v/3/

0
source

. : , . JSFiddle 2 3 . , - . , , , , .

; . , .

It seems that an error occurs when the change / border / border of a button or link changes in state :active.

This should be reported along with your JSFiddle here:

0
source

More articles:


All Articles