Question

当我悬停每个跨度时，游标会按照标题进行更改！

 var cursors = [ "auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize",  "s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize" ,"col-resize","row-resize","all-scroll","zoom-in","zoom-out","grab","grabbing" ];
    var newHTML = [];
    for (var i = 0; i < cursors.length; i++) {
        newHTML.push('<span>' + cursors[i] + '</span>');
    }
    $("body").html(newHTML.join(""));
    $("span").on( "mouseover", function() {
      $(this).css( "cursor", cursors[4] );
    });

html, body{
    margin: 30px auto;
    width: 90%;
    text-align: center;
    background: linear-gradient(top, green, lightblue);
}
h1{
    color: #f49ba2;
}
span{   
    background-color: #ddd;
    margin: 5px;
    padding: 5px;
    border: #abc 1px solid;
    display: inline-block;

}
span:odd{
    background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="element"></p>

Answer 1

你是说这个吗？

请参阅https://api.jquery.com/index/

var cursors = [ "auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize",  "s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize" ,"col-resize","row-resize","all-scroll","zoom-in","zoom-out","-webkit-grab", "-webkit-grabbing" ];
    var newHTML = [];
    for (var i = 0; i < cursors.length; i++) {
        newHTML.push('<span>' + cursors[i] + '</span>');
    }
    $("body").html(newHTML.join(""));
    $("span").on( "mouseover", function() {
      $(this).css( "cursor", cursors[$(this).index()] );
    });

html, body{
    margin: 30px auto;
    width: 90%;
    text-align: center;
    background: linear-gradient(top, green, lightblue);
}
h1{
    color: #f49ba2;
}
span{   
    background-color: #ddd;
    margin: 5px;
    padding: 5px;
    border: #abc 1px solid;
    display: inline-block;

}
span:odd{
    background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>

改变所有游标？

1 个答案: