CODEWITHSUNDEEP
javascriptjqueryhtmlcss
markzzz
markzzz

Reputation: 48065

CSS - Make a div "clickable"

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

Upvotes: 39

Views: 95685

Answers (5)

jthompson
jthompson

Reputation: 7286

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.

Upvotes: 82

Akash Jain
Akash Jain

Reputation: 493

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.

Upvotes: 3

mkg
mkg

Reputation: 779

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
}

Upvotes: 4

zzzzBov
zzzzBov

Reputation: 179284

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.

Upvotes: 10

Piskvor left the building
Piskvor left the building

Reputation: 92792

Can't you just, y'know, make it a link and style it? It would be easier and accessible.

Upvotes: 3

Related Questions