CODEWITHSUNDEEP
htmlcsscross-browser
CompanyDroneFromSector7G
CompanyDroneFromSector7G

Reputation: 4517

How to remove CSS mousedown effects

I have this problem in Safari and Chrome but not in IE. When I click a button the mousedown event triggers some kind of CSS rule which makes it slightly wider. Because of this it drops down onto the next row and the click event is not triggered. It stays on the next row until the mouse button is released.

I'm working on a large existing site and it's difficult to isolate all the CSS, but I think this could be due to an effect inherent in the browser(s).

Is there a CSS way to stop any effects occuring when the button is clicked?

Thanks for your help.

This is the CSS I have found for :active / :hover. I don't think this could cause it!

a:hover, a:active
{
    text-decoration: none;
}

(The button is an image inside an anchor)

Upvotes: 0

Views: 1176

Answers (2)

A.M.N.Bandara
A.M.N.Bandara

Reputation: 1508

Open your page with Chrome. Right click on the element and select inspect element. On the right handside corner of the inspect element handler, you will see few icons.

Click on the middle one(Which is having a arrow. When you hover it a label will display as "Toggle element State").

Change the element state to active (and to focus if it didn't change anything), and now you will be able to see what css rules are used to apply those changes to your button(It can be a padding or width).

Since now you know what the rule is, you can undo it using another rule (Or using javascript). It's hard to say how to remove the effects without knowing what the effects are.

Upvotes: 4

Youness
Youness

Reputation: 1495

you can declare a class in css name it for exemple abortmousedowncss : 

.abortmousedowncss{
width:yourwidth; !important /* this dont allow any css to overide it ;)*/
}

and you can apply it after with jquery like this :

$('#yourbutton').addClass("abortmousedowncss");

Upvotes: 0

Related Questions