CODEWITHSUNDEEP
jquery
Sylphe
Sylphe

Reputation: 1553

click() at the top of span button doesn't work

I've been trying to make buttons using the simple structure :

<a href="#/category/portfolio/" class="filter" data-filter="*">
<span class="button">Tout</span>
</a>

It works, except for the very top of the buttons. We can click on it, the CSS activates, but not the jQuery related.

http://jsfiddle.net/vqrdW/

Thanks for your help !

Upvotes: 3

Views: 605

Answers (4)

Владимир Левченко
Владимир Левченко

Reputation: 1

.span:active {   
    pointer-events: none;
}

Upvotes: 0

Lamariffic
Lamariffic

Reputation: 309

Add the padding on the a tag instead of the .button:

a.filter {
  padding: 8px 14px 10px;
}

Upvotes: 1

Behrang Saeedzadeh
Behrang Saeedzadeh

Reputation: 47971

The problem is with this rule:

.button:active { 
   position: relative; 
   top: 3px;
}

As the button moves down by 3 pixels, when the mouse button is released, the cursor is not over the button so the action is not registered. If you comment out this chunk of code you can see that it fixes the problem.

Try instead to come up with a different effect for when the button is pressed that does not move the button to one side or another.

Upvotes: 10

Lucian Vasile
Lucian Vasile

Reputation: 502

<a href="#/category/portfolio/" class="filter" data-filter="*">
<span class="button" style="display:block;width:100%;height:100%">Tout</span>
</a>

not working... sorry... here is a working version EDITED:

a.filter {
text-decoration:none;
display:block;
float:left;
line-height:40px; /*(or whatever is that button's height)*/
}

Upvotes: -1

Related Questions