我有一個(gè)基于 CSS 和 JS 的自定義光標(biāo),我想將其懸停在某些元素上時(shí)展開。我知道特異性似乎是我的問(wèn)題,但我不確定我到底做錯(cuò)了什么。據(jù)我了解,+應(yīng)該選擇與對(duì)象不共享相同父對(duì)象的:hover對(duì)象/*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>問(wèn)題是為什么a:hover+.cursor{}根本不影響光標(biāo)。任何幫助,將不勝感激。
1 回答

慕姐4208626
TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超7個(gè)贊
如果他們是直系兄弟姐妹,您可以與 一起工作+。因此,將光標(biāo)放在范圍內(nèi),然后它就可以工作了:)
<div class="inner">
<span class="switcher about use"><a href="html/about/about.html">about</a>
<div class="cursor"></div>
</span><br>
</div>
- 1 回答
- 0 關(guān)注
- 129 瀏覽
添加回答
舉報(bào)
0/150
提交
取消