blocks|key|1063825|text|您已经在示例中将其设置为可点击。如果你想让它“看起来”可点击，你可以添加一些CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1063826|.teamSelector+{+cursor:+pointer;+}|code-block|syntax|javascript|1063827|或者继续使用jQuery：|1063828|.click(function()+{+do+something+}).css("cursor",+"pointer");|1063829|Here+is游标属性的W3学校参考。|offset|length|1063830|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/cssref/pr_class_cursor.asp^0|0|0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

You've already made it clickable in your example. If you would like it to &quot;look&quot; clickable, you can add some CSS:
<pre><code>.teamSelector { cursor: pointer; }
</code></pre>
Or continuing with jQuery:
<pre><code>.click(function() { do something }).css(&quot;cursor&quot;, &quot;pointer&quot;);
</code></pre>
<a href="https://www.w3schools.com/cssref/pr_class_cursor.asp" rel="noreferrer">Here is</a> the W3 schools reference for the cursor property.

blocks|key|1063905|text|你就不能，你知道的，把它做成一个链接并设计它的样式吗？这将是更容易和可访问的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1063906|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|849622|text|它的css是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|849623|.teamSelector
{
++cursor:+pointer
}|code-block|syntax|javascript|849624|你也可以添加悬停效果，但我不确定:active是否能跨浏览器工作。|849625|如果您需要一些可单击的内容，最好使用button或a元素并对其进行样式设置。您总是可以使用javascript阻止默认操作。它更好的原因是为了便于访问，这样屏幕阅读器的用户就知道有一些东西可以与之交互。|offset|length|style|CODE|849626|click+to+add:当你用tab键浏览一个页面时，你可以点击空格键来添加一个元素。这在非交互式元素上不会起到同样的作用，所以使用该功能的任何人都不能使用您正在制作的任何东西。|849627|entityMap^0|0|0|0|I|6|P|1|0|0|5|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]|$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@$K|11|L|12|M|N]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|R|$]]

The css for it is:

<pre><code>.teamSelector
{
 cursor: pointer
}
</code></pre>

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 <code>button</code> or <code>a</code> 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 <code>click</code> 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.

blocks|key|1063972|text|这个问题很老了，但还需要补充一下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1063973|如果您希望使用基于指针用户交互来包装组件，则应该首选block元素而不是div(您仍然可以将其显示为button+)。|offset|length|style|CODE|1063974|<button+class="teamSelector"+tabindex="1">Some</button>|code-block|syntax|javascript|1063975|样式：|1063976|.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
}|1063977|entityMap^0|0|Q|5|10|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

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 <code>div</code>(you can still display it <code>block</code>).

<pre><code>&lt;button class="teamSelector" tabindex="1"&gt;Some&lt;/button&gt;
</code></pre>

styles:

<pre><code>.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
}
</code></pre>

blocks|key|1064018|text|我们可以简单地添加style=cursor:'pointer‘来显示div元素clickable。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1064019|++<div+style="cursor:+pointer;">edit</div>|code-block|syntax|javascript|1064020|当我们用鼠标遍历div元素时，它会带来小手。|1064021|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

We can show div element clickable simply by adding style=cursor:'pointer'.
for example:

<pre><code> &lt;div style="cursor: pointer;"&gt;edit&lt;/div&gt;
</code></pre>

It will bring small hand when we go over div element with the mouse.

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:

<pre><code>&lt;div class="teamSelector"&gt;Some&lt;/div&gt;
</code></pre>

With this jQuery:

<pre><code>$('.teamSelector').click(function() { 
 // some functions
});
</code></pre>

Cheers

CSS - Make a div "clickable"

jQuery

我想知道如何呈现一个可点击的div (就像一个链接，当我用鼠标移动时，用小手)。我有一些这样的元素：<div class="teamSelector">Some</div>使用此jQuery：$('.teamSelector').click(function() { // some functions});干杯

问CSS -使div“可点击”
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS -使div“可点击”EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS -使div“可点击”
EN