我目前正在HTML,CSS和JS中創建一個Windows 10副本。如何停止檢測鼠標離開如果我沒有點擊元素
重新創建桌面區域時,我需要使桌面應用程序圖標可選。我使用jquery將不同的樣式應用於單擊和鼠標左鍵上的應用程序圖標(所以當我點擊它時鼠標離開後的背景顏色會發生變化,點擊後會出現)。
我也希望能夠通過點擊另一個圖標取消選擇圖標。我的那部分代碼運行良好。但是有一些問題,這裏是我這樣做,使問題出現,文中的「()」代表什麼我的腳本做的動作:
- 點擊第一個應用程序圖標(應用「點擊」風格對於點擊圖標)
- 點擊第二個應用程序圖標(刪除「單擊」樣式前面的圖標,並申請點擊圖標)在1日的應用程序圖標
- 懸停(沒有任何反應)
- 鼠標離開1號的應用程序圖標(「點擊「風格也適用於第一個應用程序圖標!< - 這不應該發生,在這種情況下不應該發生)
我想如果它是事件監聽器的問題,我試圖使用.off()來阻止它發生,但它失敗了。
這裏是我的代碼:
的JavaScript代碼
$(".desktop-app-box").on("click", function() {
$(".desktop-app-box").css({
"background-color": "",
"border-color": ""
});
$(this).css({
"background-color": "rgba(255, 255, 255, 0.3)",
"border-color": "rgba(255, 255, 255, 0.5)"
});
$(this).on("mouseleave", function() {
$(this).css({
"background-color": "rgba(255, 255, 255, 0.4)",
"border-color": "rgba(255, 255, 255, 0.6)"
});
});
});
$("html, .start, .taskbar-start-btn").on("click", function() {
$(".desktop-app-box").css({
"background-color": "",
"border-color": ""
}).removeClass("dropped");
});
$(".desktop-app-box").click(function(event) {
event.stopPropagation();
$(".desktop-app-box").removeClass("dropped");
});
的HTML代碼
<div class="desktop">
<div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
<div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
<div class="desktop-app-box desktop-app-box-large"><img src="icon/full-recycle-bin.ico"><span>TeamViewer 12</span></div>
<div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
<div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
<div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
<div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
<div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
<div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
<div class="desktop-app-box"><img src="icon/full-recycle-bin.ico"><span>Recycle Bin</span></div>
</div>
其他腳本:
- 的jQuery 3.2.1
- jQuery UI的1.12.1
- 的jQuery 1.7.2
我已經盡我所能來描述問題,請告訴我,如果我需要澄清任何部分或應提供任何信息。非常感謝!
感謝彼得 - 我投你了,因爲它是一個更簡潔的答案OP的具體錯誤。儘管我認爲他可以從一個更好的技術中獲益,從長遠來看他會更好地爲他服務。 –