Skip to content

Commit 9dc9d1d

Browse files
ComplexRobotComplexRobot
committed
Simplified the previous mouse hover fix.
1 parent 1b96567 commit 9dc9d1d

File tree

3 files changed

+55
-75
lines changed

3 files changed

+55
-75
lines changed

‎sandwich/index.html

Lines changed: 32 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<title>Sandwich Lookup - Pok&eacute;mon Scarlet/Violet</title>
66
<link rel="icon" type="image/png" href="sprites/sandwich-icon.png">
7-
<link rel="stylesheet" href="scripts/style-2.css">
7+
<link rel="stylesheet" href="scripts/style-3.css">
88
<meta name="description" content="Lookup any Pokemon sandwich recipe by power and type at the click of a button.">
99
<meta name="keywords" content="pokemon,pokemon scarlet,pokemon violet,sandwich,sandwich recipe,encounter power,raid power,level 3,shiny hunting,pokemon battle,tera raid,dragon,dark,fairy">
1010
<meta http-equiv="charset" content="text/html; charset=utf-8">
@@ -20,62 +20,51 @@
2020
<div class=powerchoice>
2121
<div class=powerchoicetext id="power1">Encounter Power</div>
2222
<div class=warningsign id=power1warning></div>
23-
<div class=hoverarea></div>
2423
</div>
2524
<div class=powerchoice>
2625
<div class=powerchoicetext id="power2">Sparkling Power</div>
2726
<div class=warningsign id=power2warning></div>
28-
<div class=hoverarea></div>
2927
</div>
3028
<div class=powerchoice>
3129
<div class=powerchoicetext id="power3">Not Set</div>
3230
<div class=warningsign id=power3warning></div>
33-
<div class=hoverarea></div>
3431
</div>
3532
</div>
3633
<div class=typeschosen>
3734
<div class=typechoice>
3835
<div class=typechoicetext id="type1">Dragon</div>
3936
<div class=warningsign id=type1warning></div>
40-
<div class=hoverarea></div>
4137
</div>
4238
<div class=typechoice>
4339
<div class=typechoicetext id="type2">Not Set</div>
4440
<div class=warningsign id=type2warning></div>
45-
<div class=hoverarea></div>
4641
</div>
4742
<div class=typechoice>
4843
<div class=typechoicetext id="type3">Not Set</div>
4944
<div class=warningsign id=type3warning></div>
50-
<div class=hoverarea></div>
5145
</div>
5246
</div>
5347
</div>
5448
<div class=herbapane>
5549
<div class=selectionwrapper>
5650
<div class=herbaselection id="Bitter"></div>
5751
<div class=checkmark id=Bittercheck></div>
58-
<div class=hoverarea></div>
5952
</div>
6053
<div class=selectionwrapper>
6154
<div class=herbaselection id="Spicy"></div>
6255
<div class=checkmark id=Spicycheck></div>
63-
<div class=hoverarea></div>
6456
</div>
6557
<div class=selectionwrapper>
6658
<div class=herbaselection id="Salty"></div>
6759
<div class=checkmark id=Saltycheck></div>
68-
<div class=hoverarea></div>
6960
</div>
7061
<div class=selectionwrapper>
7162
<div class=herbaselection id="Sour"></div>
7263
<div class=checkmark id=Sourcheck></div>
73-
<div class=hoverarea></div>
7464
</div>
7565
<div class=selectionwrapper>
7666
<div class=herbaselection id="Sweet"></div>
7767
<div class=checkmark id=Sweetcheck></div>
78-
<div class=hoverarea></div>
7968
</div>
8069
</div>
8170
</div>
@@ -103,46 +92,46 @@
10392
</div>
10493
<div class=footer>
10594
v1<br>
106-
12/2023<br>
95+
12/17/2023<br>
10796
<a href="https://github.com/ComplexRobot/ComplexRobot.github.io/discussions" target="_blank">
10897
<img src="sprites/github-mark-white.png" title="GitHub">
10998
</a>
11099
</div>
111100
</div>
112101
<div class=powerselector>
113-
<div class=selectionwrapper><div class=powerselection id="Encounter"></div><div class=hoverarea></div></div>
114-
<div class=selectionwrapper><div class=powerselection id="Exp-Point"></div><div class=hoverarea></div></div>
115-
<div class=selectionwrapper><div class=powerselection id="Raid"></div><div class=hoverarea></div></div>
116-
<div class=selectionwrapper><div class=powerselection id="Egg"></div><div class=hoverarea></div></div>
117-
<div class=selectionwrapper><div class=powerselection id="Sparkling"></div><div class=hoverarea></div></div>
118-
<div class=selectionwrapper><div class=powerselection id="Catching"></div><div class=hoverarea></div></div>
119-
<div class=selectionwrapper><div class=powerselection id="Item-Drop"></div><div class=hoverarea></div></div>
120-
<div class=selectionwrapper><div class=powerselection id="Teensy"></div><div class=hoverarea></div></div>
121-
<div class=selectionwrapper><div class=powerselection id="Humungo"></div><div class=hoverarea></div></div>
122-
<div class=selectionwrapper><div class=powerselection id="Title"></div><div class=hoverarea></div></div>
123-
<div class=selectionwrapper><div class=powerselection id="Not Set"></div><div class=hoverarea></div></div>
102+
<div class=selectionwrapper><div class=powerselection id="Encounter"></div></div>
103+
<div class=selectionwrapper><div class=powerselection id="Exp-Point"></div></div>
104+
<div class=selectionwrapper><div class=powerselection id="Raid"></div></div>
105+
<div class=selectionwrapper><div class=powerselection id="Egg"></div></div>
106+
<div class=selectionwrapper><div class=powerselection id="Sparkling"></div></div>
107+
<div class=selectionwrapper><div class=powerselection id="Catching"></div></div>
108+
<div class=selectionwrapper><div class=powerselection id="Item-Drop"></div></div>
109+
<div class=selectionwrapper><div class=powerselection id="Teensy"></div></div>
110+
<div class=selectionwrapper><div class=powerselection id="Humungo"></div></div>
111+
<div class=selectionwrapper><div class=powerselection id="Title"></div></div>
112+
<div class=selectionwrapper><div class=powerselection id="Not Set"></div></div>
124113
<div class=checkmark></div>
125114
</div>
126115
<div class=typeselector>
127-
<div class=selectionwrapper><div class=typeselection id="Normal"></div><div class=hoverarea></div></div>
128-
<div class=selectionwrapper><div class=typeselection id="Fighting"></div><div class=hoverarea></div></div>
129-
<div class=selectionwrapper><div class=typeselection id="Flying"></div><div class=hoverarea></div></div>
130-
<div class=selectionwrapper><div class=typeselection id="Poison"></div><div class=hoverarea></div></div>
131-
<div class=selectionwrapper><div class=typeselection id="Ground"></div><div class=hoverarea></div></div>
132-
<div class=selectionwrapper><div class=typeselection id="Rock"></div><div class=hoverarea></div></div>
133-
<div class=selectionwrapper><div class=typeselection id="Bug"></div><div class=hoverarea></div></div>
134-
<div class=selectionwrapper><div class=typeselection id="Ghost"></div><div class=hoverarea></div></div>
135-
<div class=selectionwrapper><div class=typeselection id="Steel"></div><div class=hoverarea></div></div>
136-
<div class=selectionwrapper><div class=typeselection id="Fire"></div><div class=hoverarea></div></div>
137-
<div class=selectionwrapper><div class=typeselection id="Water"></div><div class=hoverarea></div></div>
138-
<div class=selectionwrapper><div class=typeselection id="Grass"></div><div class=hoverarea></div></div>
139-
<div class=selectionwrapper><div class=typeselection id="Electric"></div><div class=hoverarea></div></div>
140-
<div class=selectionwrapper><div class=typeselection id="Psychic"></div><div class=hoverarea></div></div>
141-
<div class=selectionwrapper><div class=typeselection id="Ice"></div><div class=hoverarea></div></div>
142-
<div class=selectionwrapper><div class=typeselection id="Dragon"></div><div class=hoverarea></div></div>
143-
<div class=selectionwrapper><div class=typeselection id="Dark"></div><div class=hoverarea></div></div>
144-
<div class=selectionwrapper><div class=typeselection id="Fairy"></div><div class=hoverarea></div></div>
145-
<div class=selectionwrapper><div class=typeselection id="Not Set"></div><div class=hoverarea></div></div>
116+
<div class=selectionwrapper><div class=typeselection id="Normal"></div></div>
117+
<div class=selectionwrapper><div class=typeselection id="Fighting"></div></div>
118+
<div class=selectionwrapper><div class=typeselection id="Flying"></div></div>
119+
<div class=selectionwrapper><div class=typeselection id="Poison"></div></div>
120+
<div class=selectionwrapper><div class=typeselection id="Ground"></div></div>
121+
<div class=selectionwrapper><div class=typeselection id="Rock"></div></div>
122+
<div class=selectionwrapper><div class=typeselection id="Bug"></div></div>
123+
<div class=selectionwrapper><div class=typeselection id="Ghost"></div></div>
124+
<div class=selectionwrapper><div class=typeselection id="Steel"></div></div>
125+
<div class=selectionwrapper><div class=typeselection id="Fire"></div></div>
126+
<div class=selectionwrapper><div class=typeselection id="Water"></div></div>
127+
<div class=selectionwrapper><div class=typeselection id="Grass"></div></div>
128+
<div class=selectionwrapper><div class=typeselection id="Electric"></div></div>
129+
<div class=selectionwrapper><div class=typeselection id="Psychic"></div></div>
130+
<div class=selectionwrapper><div class=typeselection id="Ice"></div></div>
131+
<div class=selectionwrapper><div class=typeselection id="Dragon"></div></div>
132+
<div class=selectionwrapper><div class=typeselection id="Dark"></div></div>
133+
<div class=selectionwrapper><div class=typeselection id="Fairy"></div></div>
134+
<div class=selectionwrapper><div class=typeselection id="Not Set"></div></div>
146135
<div class=checkmark></div>
147136
</div>
148137
</body>

‎sandwich/scripts/main.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,11 @@ document.addEventListener("DOMContentLoaded", (event) => {
3939
document.getElementById("type2").parentElement.addEventListener("click", (event) => { ShowSelector("type2", "typeselector"); });
4040
document.getElementById("type3").parentElement.addEventListener("click", (event) => { ShowSelector("type3", "typeselector"); });
4141
for (const selectionDiv of document.getElementsByClassName("powerselection")) {
42-
selectionDiv.parentElement.children[1].addEventListener("click",
43-
(event) => { UpdateSelection(event.target.parentElement.children[0], "powerselector"); });
42+
selectionDiv.parentElement.addEventListener("click", (event) => { UpdateSelection(event.target.children[0], "powerselector"); });
4443
selectionDiv.addEventListener("click", (event) => { UpdateSelection(event.target, "powerselector"); });
4544
}
4645
for (const selectionDiv of document.getElementsByClassName("typeselection")) {
47-
selectionDiv.parentElement.children[1].addEventListener("click",
48-
(event) => { UpdateSelection(event.target.parentElement.children[0], "typeselector"); });
46+
selectionDiv.parentElement.addEventListener("click", (event) => { UpdateSelection(event.target.children[0], "typeselector"); });
4947
selectionDiv.addEventListener("click", (event) => { UpdateSelection(event.target, "typeselector"); });
5048
}
5149
document.getElementsByClassName("recipeslistwrapper")[0].style.setProperty("top",

‎sandwich/scripts/style-2.css renamed to ‎sandwich/scripts/style-3.css

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -77,25 +77,21 @@ body {
7777

7878
.powerchoicetext, .typechoicetext {
7979
text-overflow: clip;
80+
pointer-events: none;
8081
}
8182

82-
.powerchoicetext {
83-
margin-bottom: 3px;
83+
.selectionwrapper > * {
84+
pointer-events: none;
8485
}
8586

86-
.hoverarea {
87-
position: absolute;
88-
width: 40px;
89-
height: 40px;
90-
z-index: 4;
87+
.powerchoicetext {
88+
margin-bottom: 3px;
9189
}
9290

93-
.selectionwrapper:has(> .hoverarea:hover) > *:not(.checkmark):not(.hoverarea),
94-
.powerchoice:has(> .hoverarea:hover) > *:is(.powerchoicetext, .typechoicetext),
95-
.typechoice:has(> .hoverarea:hover) > *:is(.powerchoicetext, .typechoicetext),
96-
#selected > *:is(.powerchoicetext, .typechoicetext),
97-
*:has(~ #selected) > *:is(.powerchoicetext, .typechoicetext),
98-
#selected ~ * > *:is(.powerchoicetext, .typechoicetext) {
91+
.selectionwrapper:hover > *:not(.checkmark), .powerchoice:hover > *:not(.warningsign), .typechoice:hover > *:not(.warningsign),
92+
#selected > *:not(.warningsign),
93+
*:has(~ #selected) > *:not(.warningsign),
94+
#selected ~ * > *:not(.warningsign) {
9995
font-size: 16px;
10096
overflow: visible;
10197
margin-top: 30px;
@@ -104,17 +100,17 @@ body {
104100
text-shadow: 1px 1px black, 2px 2px black;
105101
}
106102

107-
.powerchoice:has(> .hoverarea:hover) > .powerchoicetext {
103+
.powerchoice:hover > *:not(.warningsign) {
108104
margin-top: 27px;
109105
}
110106

111-
*:has(~ #selected) > *:is(.powerchoicetext, .typechoicetext), #selected ~ * > *:is(.powerchoicetext, .typechoicetext) {
107+
*:has(~ #selected) > *:not(.warningsign), #selected ~ * > *:not(.warningsign) {
112108
color: #787878;
113109
}
114110

115-
#selected > *:is(.powerchoicetext, .typechoicetext),
116-
*:has(~ #selected) > *:is(.powerchoicetext, .typechoicetext),
117-
#selected ~ * > *:is(.powerchoicetext, .typechoicetext) {
111+
#selected > *:not(.warningsign),
112+
*:has(~ #selected) > *:not(.warningsign),
113+
#selected ~ * > *:not(.warningsign) {
118114
background-color: #202020;
119115
border: solid 3px #808080;
120116
border-bottom-width: 0;
@@ -128,19 +124,20 @@ body {
128124
margin-right: 0;
129125
width: 50px;
130126
position: absolute;
127+
pointer-events: unset;
131128
}
132129

133-
#selected.powerchoice > *:is(.powerchoicetext, .typechoicetext),
134-
*:has(~ #selected.powerchoice) > *:is(.powerchoicetext, .typechoicetext),
135-
#selected.powerchoice ~ * > *:is(.powerchoicetext, .typechoicetext) {
130+
#selected.powerchoice > *:not(.warningsign),
131+
*:has(~ #selected.powerchoice) > *:not(.warningsign),
132+
#selected.powerchoice ~ * > *:not(.warningsign) {
136133
margin-top: 32px;
137134
}
138135

139-
*:has(~ #selected) > *:is(.powerchoicetext, .typechoicetext):not(#power1, #type1) {
136+
*:has(~ #selected) > *:not(.warningsign):not(#power1, #type1) {
140137
border-right-width: 0;
141138
}
142139

143-
#selected ~ * > *:is(.powerchoicetext, .typechoicetext):not(#power3, #type3) {
140+
#selected ~ * > *:not(.warningsign):not(#power3, #type3) {
144141
border-left-width: 0;
145142
}
146143

@@ -152,7 +149,7 @@ body {
152149
border-top-right-radius: 10px;
153150
}
154151

155-
#selected > *:is(.powerchoicetext, .typechoicetext) {
152+
#selected > *:not(.warningsign) {
156153
border-radius: 10px;
157154
border-bottom-left-radius: 0;
158155
border-bottom-right-radius: 0;
@@ -168,10 +165,6 @@ body {
168165
opacity: 0.5;
169166
}
170167

171-
*:has(> #selected) ~ * > .typechoice > .hoverarea {
172-
pointer-events: none;
173-
}
174-
175168
.selectionwrapper:hover, .powerchoice:hover, .typechoice:hover {
176169
cursor: pointer;
177170
}

0 commit comments

Comments
 (0)