Question

嗨有没有办法只使用CSS获取光标位置。我有一个盒子，我想根据用户的最后点击对齐。我没有自由使用javascript或jquery或任何其他框架。它需要通过CSS完成。我正在使用IE11浏览器。如果存在任何此类CSS规则，请告诉我。我们可以在某些函数中添加一些东西，比如calc（）

Answer 1

在回答您的问题时，您是否无法使用CSS来跟踪用户的光标位置。 CSS用于样式化html页面/元素。跟踪光标位置的唯一方法是使用javascript。

：）

Answer 2

Yes you can。

html：

//  this is an experimental example of
//  how we can achieve mouse tracking with pure css

//  how does it work?


//  i created the grid out of 500 div elements
//  that i use to track where the pointer is.
//  setting $sensitivity means setting how many of 
//  grid-items will be in a row.

//  playground is a div behind all grid-elements
//  that has one circle (point) which position is
//  controlled by :hover-ing on grid-elements


div.grid
    - for(var x = 1;x <= 500;x++)
      div.grid-item
    div.playground
        span.point

css：

@import 'compass';
$point-size: 1;
$point-color: white;
$elements-in-grid: 500; // from html part
$sensitivity: 30; // The higher number - higher sensitivity. 
                // For best result set from 10 to 50


* { @include box-sizing(border-box); }
body { overflow: hidden; }
.grid {
    position: absolute;
    z-index: 999;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow-y: scroll;
    width: calc(100vw + 17px);
    .grid-item {
        position: relative;
        z-index: 20;
        float: left;
        width: 100 / $sensitivity + vw;
        border: 1px solid rgba(white, .02);
        @for $i from 1 through $elements-in-grid {
            &:nth-child(#{$i}) {
                &:hover {
                    & ~ .playground {
                        .point {
                            $row: ceil(($i/$sensitivity));
                            top:   ($row * (100 / $sensitivity)
                                 - ((100 / $sensitivity)/2))
                                 - ($point-size / 2)
                                 + vw;
                            left:  (($i - (($row - 1) * $sensitivity ))
                                 * (100 / $sensitivity))
                                 - ((100 / $sensitivity) / 2) - ($point-size / 2)
                                 + vw;
                        }
                    }
                }
            }
        }
    }
    .playground {
        position: relative;
        z-index: 1;
        width: 100%;
        height: ($elements-in-grid * 100) / ($sensitivity * $sensitivity) + vw;
        background: #dad299;
        @include background-image(linear-gradient(to top, #dad299, #b0dab9));
        .point {
            position: absolute;
            display: block;
            width: $point-size + vw;
            background-color: $point-color;
            @include border-radius(50%);
            @include box-shadow(rgba(0,0,0,.1) 0px 10px 30px);
            @include transition(all, .2s);
        }
    }
}
.grid-item,
.point {
    &:after {
        display: block;
        padding-bottom: 100%;
        content: '';
    }
}

甚至可以远程完成对客户端进行指纹识别的操作： https://twitter.com/davywtf/status/1124146339259002881 https://gist.github.com/wybiral/c8f46fdf1fc558d631b55de3a0267771

// Tracking cursor position in real-time without JavaScript
// Demo: https://twitter.com/davywtf/status/1124146339259002881

package main

import (
    "fmt"
    "net/http"
    "strings"
)

const W = 50
const H = 50

var ch chan string

const head = `<head>
<style>
*{margin:0;padding:0}
html,body{width:100%;height:100%}
p{
width:10px;
height:10px;
display:inline-block;
border-right:1px solid #666;
border-bottom:1px solid #666
}
</style>
</head>`

func main() {
    ch = make(chan string)
    http.HandleFunc("/", handler)
    http.ListenAndServe(":8080", nil)
}

func handler(w http.ResponseWriter, r *http.Request) {
    p := r.URL.Path
    if p == "/" {
        index(w, r)
        return
    } else if p == "/watch" {
        watch(w, r)
        return
    } else {
        if strings.HasPrefix(p, "/c") && strings.HasSuffix(p, ".png") {
            ch <- p[1 : len(p)-4]
        }
    }
}

func index(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "text/html; charset=utf-8")
    flusher, ok := w.(http.Flusher)
    if !ok {
        return
    }
    w.Write([]byte(head))
    flusher.Flush()
    // Send <p> grid
    w.Write([]byte("<body>\n"))
    for i := 0; i < H; i++ {
        w.Write([]byte("<div>"))
        for j := 0; j < W; j++ {
            w.Write([]byte(fmt.Sprintf("<p id=\"c%dx%d\"></p>", i, j)))
        }
        w.Write([]byte("</div>\n"))
    }
    w.Write([]byte("</body>\n"))
    flusher.Flush()
    // Send CSS
    w.Write([]byte("<style>"))
    for i := 0; i < H; i++ {
        for j := 0; j < W; j++ {
            id := fmt.Sprintf("c%dx%d", i, j)
            s := fmt.Sprintf("#%s:hover{background:url(\"%s.png\")}", id, id)
            w.Write([]byte(s))
        }
    }
    w.Write([]byte("</style>"))
    flusher.Flush()
}

func watch(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "text/html; charset=utf-8")
    flusher, ok := w.(http.Flusher)
    if !ok {
        return
    }
    w.Write([]byte(head))
    flusher.Flush()
    // Send <p> grid
    w.Write([]byte("<body>\n"))
    for i := 0; i < H; i++ {
        w.Write([]byte("<div>"))
        for j := 0; j < W; j++ {
            w.Write([]byte(fmt.Sprintf("<p id=\"c%dx%d\"></p>", i, j)))
        }
        w.Write([]byte("</div>\n"))
    }
    w.Write([]byte("</body>\n"))
    flusher.Flush()
    // Listen to ch for updates and write to response
    for p := range ch {
        s := fmt.Sprintf("<style>#%s{background:#000}</style>\n", p)
        _, err := w.Write([]byte(s))
        if err != nil {
            return
        }
        flusher.Flush()
    }
}

在没有Javascript的情况下获取鼠标指针在CSS中的位置

2 个答案: