个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 09:45:42 24 4
gpt4 key购买 nike

有没有办法只使用 CSS 获取光标位置。我有一个框，我想根据用户上次点击对齐。我没有使用 javascript 或 jquery 或任何其他框架的自由。它需要通过 CSS 来完成。我使用的是 IE11 浏览器。

如果存在任何此类 CSS 规则，请告诉我。我们可以在一些函数中放入一些东西，比如 calc()

最佳答案

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

(GoLang 代码)

// 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 - 在没有 Javascript 的情况下获取鼠标指针在 CSS 中的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35990505/

24 4 0
文章推荐： css - Bootstrap - 进度指示器
文章推荐： javascript - jQuery 事件 ajax 调度
文章推荐： css - ReactCSSTransitionGroup 离开动画不工作
文章推荐： jquery - Safari 可能出现 float 问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com