我有一個基于 CSS 和 JS 的自定義光標,當懸停在某些元素上時我想擴展它。我知道特異性似乎是我的問題,但我不確定我到底做錯了什么。據我了解,+應該選擇與對象不共享相同父對象的:hover東西/*kinda laggy cursor control js */const cursor = document.querySelector('.cursor');document.addEventListener('mousemove', e => { cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")})const cursor2 = document.querySelector('.cursor2');document.addEventListener('mousemove', e => { cursor2.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")}).cursor { width: 25px; height: 25px; position: absolute; border: 2px solid rgb(41, 41, 41); border-radius: 50%; transform: translate(-50%, -50%); transition: 50ms; transition-timing-function: ; mix-blend-mode: difference; z-index: 200; pointer-events: none;}.cursor2 { z-index: 200; transition: 10ms; width: 5px; height: 5px; border-radius: 50%; background-color: black; pointer-events: none; mix-blend-mode: difference; position: absolute; transition-timing-function: ;}.inner { font-family: 'Helvetica'; font-size: calc(2em + 8vw); font-weight: 700; -webkit-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke: 1px; -webkit-text-stroke-color: rgb(0, 0, 0); letter-spacing: -.6vw; line-height: calc(.7em + 1vw); animation: marquee 30s linear infinite; display: inline-block; user-select: none;}a { text-decoration: none; cursor: none;}a:hover+.cursor { transform: scale(1.5); !important transition-duration: 500ms;}<div class="inner"> <span class="switcher about use"><a href="html/about/about.html">about</a></span><br></div><!-- outer cursor div--><div class="cursor"></div><!-- inner cursor div--><div class="cursor2"></div>問題是為什么a:hover+.cursor{}根本不影響光標。任何幫助,將不勝感激。
CSS 和純 JS 自定義光標在懸停時展開
森欄
2022-07-08 18:06:41