当鼠标移过表格中的一行时,将光标更改为手形

时间:2012-02-15 04:01:09

标签: html css cursor

当我的鼠标移过<tr>

中的<table>时,如何将光标指针更改为指针
<table class="sortable" border-style:>
  <tr>
    <th class="tname">Name</th><th class="tage">Age</th>
  </tr>
  <tr><td class="tname">Jennifer</td><td class="tage">24</td></tr>
  <tr><td class="tname">Kate</td><td class="tage">36</td></tr>
  <tr><td class="tname">David</td><td class="tage">25</td></tr>
  <tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>

12 个答案:

答案 0 :(得分:313)

你可以用CSS实际做到这一点。

.sortable tr {
    cursor: pointer;
}

答案 1 :(得分:196)

我搜索了一些bootstrap样式,发现了这个:

DOM

所以我假设你可以得到你想要的东西:

(function(){
angular.module('app')
    .controller('MainController', MainController);

function MainController($resource, $http){
    var vm = this;


    //serviceModule.factory('twitter', function ($resource, $http) {
        var consumerKey = encodeURIComponent('xxxxxxxxxxxxxx');
        var consumerSecret = encodeURIComponent('xxxxxxxxxxxxxxxxxxxxxx');

        var credentials = btoa(consumerKey + ':' + consumerSecret);
        console.log(credentials);
        // Twitters OAuth service endpoint
        var twitterOauthEndpoint = $http.post(
            'https://api.twitter.com/1.1'
            , "grant_type=client_credentials"
            , {headers: {'Authorization': 'Basic ' + credentials,
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                        }}
        );
        twitterOauthEndpoint.success(function (response) {
            // a successful response will return
            // the "bearer" token which is registered
            // to the $httpProvider
            //serviceModule.$httpProvider.defaults.headers.common['Authorization'] = "Bearer " + response.access_token
            console.log("response");
        }).error(function (response) {
              // error handling to some meaningful extent
              console.log("error " + response);
            })
            }

}());

答案 2 :(得分:65)

我发现最简单的方法是添加

style="cursor: pointer;"

到你的标签。

答案 3 :(得分:23)

cursor: pointer添加到您的css。

答案 4 :(得分:16)

我将此添加到我的style.css中以管理游标选项:

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}

答案 5 :(得分:11)

与IE的兼容性&lt; 6按此顺序使用此样式:

.sortable:hover {
    cursor: pointer;
    cursor: hand;
}

但要记住IE&lt; 7仅使用:hover元素支持<a>伪类。

答案 6 :(得分:10)

使用CSS中的样式cursor: pointer;作为您希望光标更改的元素。

在您的情况下,您将使用(在您的.css文件中):

.sortable {
    cursor: pointer;
}

答案 7 :(得分:9)

使用CSS cursor 属性,如下所示:

<table class="sortable">
  <tr>
    <th class="tname">Name</th><th class="tage">Age</th>
  </tr>
  <tr style="cursor: pointer;"><td class="tname">Jennifer</td><td class="tage">24</td></tr>
  <tr><td class="tname">Kate</td><td class="tage">36</td></tr>
  <tr><td class="tname">David</td><td class="tage">25</td></tr>
  <tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>

当然,您应该将样式放入CSS文件并将其应用到类中。

答案 8 :(得分:4)

使用css

table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/

答案 9 :(得分:3)

带有内联样式的示例:

<table>
  <tr> <td style="cursor: pointer;">mouse me over: pointer</td> </tr>
  <tr> <td style="cursor: wait;">mouse me over: wait</td> </tr>
  <tr> <td style="cursor: zoom-in;">mouse me over: zoom-in</td> </tr>
</table>

答案 10 :(得分:2)

对于上述解决方案只是一个标准工作,但如果您使用数据表,则必须覆盖默认的datatatables.css设置并将以下代码添加到自定义css中,在下面的代码中,row-select是我的类添加到数据表中,如html中所示。

table.row-select.dataTable tbody td
{
cursor: pointer;    
}

你的HTML看起来如下:

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>

答案 11 :(得分:0)

当鼠标悬停在鼠标指针中的值上时,如何更改光标指针 我需要将光标(手)用于两件事,将指针用于一件事

<TD class="Field" nowrap="true"> 

    <xsl:if test="KEY" >
    <xsl:attribute name="onclick">openWithTheseKeys("<xsl:value-of select='$' />","<xsl:value-of select='$' />","", true);</xsl:attribute>

    </xsl:if>
    <xsl:if test="KEY" >
    <xsl:attribute name="onclick">openWithTheseKeys("<xsl:value-of select='$' />","<xsl:value-of select='$' />","", true);</xsl:attribute>

    </xsl:if> 
<xsl:if test="KEY" >
    <xsl:attribute name="onclick">openWithTheseKeys("<xsl:value-of select='$' />","<xsl:value-of select='$' />","", true);</xsl:attribute>

    </xsl:if>               
    <xsl:value-of select="KEY" />
</TD>