I'd like to know how i can render a div clickable (like a link, with the small hand when i go over with the mouse).
I have some elements like this:
<div class="teamSelector">Some</div>
With this jQuery:
$('.teamSelector').click(function() {
// some functions
});
Cheers
You've already made it clickable in your example. If you would like it to "look" clickable, you can add some CSS:
.teamSelector { cursor: pointer; }
Or continuing with jQuery:
.click(function() { do something }).css("cursor", "pointer");
Here is the W3 schools reference for the cursor property.
.css(...).attr('tabindex', 0); Does your page work w/o JS?
The css for it is:
.teamSelector
{
cursor: pointer
}
You can also add hover effects, but I'm not sure if :active will work cross-browser.
If you need something to be clickable, you're better off using a button or a element and styling that. You can always prevent the default action with javascript. The reason it's better is for accessibility so that users with screen readers know that there's something to interact with.
Edit to add:
When you tab through a page, you can hit the space bar to click an element. This will not work the same on non-interactive elements, so anyone using that functionality will not be able to use whatever it is you're making.
this question is pretty old but needs some additions:
if you want to wrap component with pointer-based user interaction, you should prefer button element instead of a div(you can still display it block).
<button class="teamSelector" tabindex="1">Some</button>
styles:
.teamSelector{
user-select: none; // this sets the element unselectable, unlike texts
cursor: pointer; // changes the client's cursor
touch-action: manipulation; // disables tap zoom delaying for acting like real button
display: block; // if you want to display as block element
background: transparent; //remove button style
border: 0; //remove button style
}
Can't you just, y'know, make it a link and style it? It would be easier and accessible.
We can show div element clickable simply by adding style=cursor:'pointer'. for example:
<div style="cursor: pointer;">edit</div>
It will bring small hand when we go over div element with the mouse.
