有没有办法仅使用 CSS 来获取光标位置。我有一个框，我想根据用户最后一次单击来对齐。我没有自由使用 javascript 或 jquery 或任何其他框架。它需要通过 CSS 来完成。我使用的是IE11浏览器。
如果存在此类 CSS 规则，请告诉我。我们可以将其放入诸如 calc() 这样的函数中
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
（Go语言代码）
// 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()
}
}
回答你的问题是，你不能使用CSS来跟踪用户的光标位置。 CSS 用于设置 HTML 页面和元素的样式。跟踪光标位置的唯一方法是借助 JavaScript。
:)