Help with a hover [proboards]

options
Help with a hover [proboards] written Mar 7, 2020 2:09:39 GMT
0written posts
Deletedearned bits
offlinecurrently
Deleted
Deleted Avatar
Hi! Obviously kinda joined on a whim, but I ran into a snag making a simple post template and need some new eyes on it.

[nospaces]
[div][attr="class","eqborder"]
[div][attr="class","eqtitle"]YOU'VE GOT MAIL[i]![/i][break][/div]
[div][attr="class","eqbutton"]⇥[/div]
[div][attr="class","eqbody"]If the diversion and disarming were not enough, the horseman could now hear yelling above them. However, even though he was still blinded, he still attempted to throw his pumpkin-like head up into the air, tossing it into the fray. The jack-o-lantern gave a wicked smile before bursting into tiny pieces like before -- its seeds razor sharp, and shooting every which way in an effort to catch the girl off-guard, or, at least, affect her intentioned aim.
[break][break]
If the diversion and disarming were not enough, the horseman could now hear yelling above them. However, even though he was still blinded, he still attempted to throw his pumpkin-like head up into the air, tossing it into the fray. The jack-o-lantern gave a wicked smile before bursting into tiny pieces like before -- its seeds razor sharp, and shooting every which way in an effort to catch the girl off-guard, or, at least, affect her intentioned aim.
[/div]
[div][attr="class","eqtag"]pp up[/div]
[/div]

[googlefont=VT323]
[googlefont=IBM Plex Mono]

[newclass=.eqborder]margin:auto; width:360px; background:#E0E6F8; color:white; border-radius:5px; padding:6px; text-align:center;[/newclass]

[newclass=.eqbody]box-sizing:border-box; max-width:360px; width:100%; margin-bottom:10px; background:white; color:#100719; border-radius:5px; padding:10px; text-align:justify; font-family:ibm plex mono; font-size:10px;[/newclass]

[newclass=.eqtitle]display:inline-block; font-family:VT323; font-size:20px; text-shadow:#F6CEF5 1px 0px 0px;[/newclass]

[newclass=.eqbutton]display:inline-block; float:right; height:20px; width:20px; background:#F6CEF5; border-radius:100px; text-align:center; font-size:13px; text-shadow:1px 0px 0px #F7A0F4;[/newclass]

[newclass=.eqtag]opacity:0; box-sizing:border-box; max-width:360px; width:100%; height:15px; background:#F6CEF5; text-shadow:1px 0px 0px #F7A0F4; font-family:VT323;[/newclass]

[newclass=".eqbutton:hover"]transform:rotate(450deg); transition-duration:.75s;[/newclass]

[newclass=".eqbutton:hover .eqtag"]opacity:1; transition-duration:.75s;[/newclass]

^ Here's my code! ^

Ideally, when you hover over the button, a div should appear in the gap at the bottom. I've checked my syntax across several post templates and can't find where my mistake is. I don't think it's the forum I'm using the code on because templates using hovers with the same syntax have been used by other members without issue.

Thanks so much for your help! I'm a little stubborn on getting this to work, haha.
options
Help with a hover [proboards] written Mar 7, 2020 2:27:19 GMT
the endless hunt
aliasleto, blobert, crow
pronounshe / they
1,370written posts
ullaearned bits
offlinecurrently
ulla
Administrator
ulla Avatar
in turning divine, we tangle endlessly

@404 it isn't working because the div that you're trying to make appear isn't a descendant (within) the div that you hover over and your combinator between the classes (being a space) is telling the hover to affect something that's within the div you're hovering.

if you add a '~' between the class you hover and the class that's affected, it should work (i've tested it and gotten it to work on my end. so in short, you'll want to replace the last newclass line with:

[newclass=".eqbutton:hover ~ .eqtag"]opacity:1; transition-duration:.75s;[/newclass]

you can find more information on combinators here if you're interested in learning!
last edit on Mar 7, 2020 2:28:50 GMT by ulla
options
Help with a hover [proboards] written Mar 22, 2020 14:58:59 GMT
3,084written posts
Kitten4uearned bits
offlinecurrently
Kitten4u
Part of the Furniture
Kitten4u Avatar
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.