(how) can I ::hover?

[antimoany]

I thought I could use Style Tag to hover but the documentation doesn't explain how, and my guessing has all been for nought. I've tried searching and found threads with conflicting and confusing information. I was beginning to think it just isn't possible, but then I found this thread, which not only states that it is possible - and without Style Tag! - but demonstrates the method.

Except that method doesn't work for me, because as the very post in question clearly states, BBCode doesn't support classes. (After all, that's what Style Tag is for, right?)

So why do they then go on to demonstrate a method that works? Either BBCode supports classes (and psudeo-elements such as ::hover) or it doesn't. Why are they saying both in the exact same post?

As they outright explain, the CSS will get stripped by the parser when submitted or previewed. So...what the hell are they doing? And how do I do it?

[Kami]

Chris may be able to explain better, but it looks like the "class" in the bb code of that post was an example of something that would not work, and the css below an alternative (notice that it is classless).

what's actually happening in the css is that rather than the class, the css is targeting, specifically, any links within a post that are designated to have ff0000 or red (these are the same thing but one has the hex and one has the word) as their colour to hover blue.

[antimoany]

Ah, I see what you mean. I do believe you're right. I'll wait and see if Chris comes along, but it looks like inserting ::hover rules simply isn't possible in BBCode.

Not a huge surprise if so, I just thought I'd try.

[Bennett 🚀]

antimoany you can add a :hover pseudo class with the [newclass] tag from Style Tags, such as:

[div][attr="class","hover"]Hover Me[/div]
[newclass=".hover:hover"]background-color: red;[/newclass]

This only works when in the BBcode editor of the PB reply area, and not in the output tab.

[antimoany]

Aug 16, 2020 9:53:57 GMT -8 Bennett 🚀 said:

antimoany you can add a :hover pseudo class with the [newclass] tag from Style Tags, such as:

[div][attr="class","hover"]Hover Me[/div]
[newclass=".hover:hover"]background-color: red;[/newclass]

This only works when in the BBcode editor of the PB reply area, and not in the output tab.

Ah, thank you for confirming! The code you supplied is working for me.

That's the exact structure I tried before coming here, but trying it again I now realise the CSS I was using just doesn't work. I'm not actually sure why, by all accounts it should work and, as true HTML/CSS, does.

But there's another method to getting the same outcome that does work, so it's not a problem.

Thanks for saving me the headache. Rather than jump to "hover doesn't work" I probably should have tried a simple background-color rule myself...

[Bennett 🚀]

Aug 16, 2020 11:49:00 GMT -8 antimoany said:

Aug 16, 2020 9:53:57 GMT -8 Bennett 🚀 said:

antimoany you can add a :hover pseudo class with the [newclass] tag from Style Tags, such as:

[div][attr="class","hover"]Hover Me[/div]
[newclass=".hover:hover"]background-color: red;[/newclass]

This only works when in the BBcode editor of the PB reply area, and not in the output tab.

Ah, thank you for confirming! The code you supplied is working for me.

That's the exact structure I tried before coming here, but trying it again I now realise the CSS I was using just doesn't work. I'm not actually sure why, by all accounts it should work and, as true HTML/CSS, does.

But there's another method to getting the same outcome that does work, so it's not a problem.

Thanks for saving me the headache. Rather than jump to "hover doesn't work" I probably should have tried a simple background-color rule myself...

Could you give an example of what you are trying to achieve?

[antimoany]

I wanted hovering an image to reveal a div. I actually got it working as intended! It wasn't working the first time because the way I'm used to doing it, on another site, relied on an external library. Using standard CSS, it works fine!

I do have a related issue, however. When two such images are side-by-side, it is only possible to hover the leftmost image (unless I very carefully move my cursor down the div, in which case I can hover the other image). I'm sure I've made a simple mistake, but I can't figure out what that mistake is.

I did try putting pointer-events:none on the offending div, .hoverhelioptile, but it didn't help, so I removed it again.

If you have a style tag forum you can test this on, and can understand what I've done wrong, I'd appreciate guidance.

[nospaces][div][attr="style","width:67%; display:inline-block; margin-right:10px; vertical-align:top; font-size:14px"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/div]

[div][attr="style","width:30%; display:inline-block; vertical-align:top; text-align:right"]
[div][attr="class","parenthelioptile"][attr="style","display:inline-block"]
   [div][attr="class","hoverhere"]
[a href="https://pokemonrapture.freeforums.net/post/1112"][img style="max-width:100%;" src="https://media.discordapp.net/attachments/742286317274005614/744667650063466566/Helioptile_sprite_ish.png"][/a]
   [div style="margin-bottom:20px;background-color:#fde97375;border-radius:10px;padding:5px;"][attr="class","hoverhelioptile"]
[b]"Helioptile"[/b]  | [b]Helioptile[/b]  | [b]Lvl 1[/b]  | ♂[break][span style="padding:2px;line-height:12px;background:#F8D030;border-radius:2px;"][b]Electric[/b][/span] [span style="padding:2px;line-height:12px;background:#A8A878;border-radius:2px;"][b]Normal[/b][/span]

[table style="table-layout:auto;margin-right:0px;margin-left:auto;"][tbody][tr][td style="padding:3px;"][b]Max HP[/b][/td][td style="padding:3px;"][b]Attack[/b][/td][td style="padding:3px;"][b]Defense[/b][/td][td style="padding:3px;"][b]Speed[/b][/td][/tr][tr][td style="padding:3px;"]8[/td][td style="padding:3px;"]10
[/td][td style="padding:3px;"]8
[/td][td style="padding:3px;"]14
[/td][/tr][/tbody][/table][break]
[b]Ability:[/b] Dry Skin: Water attacks heal 25% of its maximum HP; takes 25% more damage from Fire; in bright sunshine, loses 1/8 of its maximum HP each turn; in rain, recovers 1/8 of its maximum HP each turn[break]
[b]Held item:[/b] none[break]
[b]Moves:[/b] Mud-Slap, Tail Whip[/div][/div][/div]

[div][attr="class","parentnincada"][attr="style","display:inline-block"]
   [div][attr="class","hoverhere"]
[a href="https://pokemonrapture.freeforums.net/post/843"][img src="https://cdn.bulbagarden.net/upload/8/8b/Spr_3r_290.png" style="max-width:100%;"][/a]
   [div style="margin-bottom:20px;background-color:#e0d0d075;border-radius:10px;padding:5px;"][attr="class","hovernincada"]
[b]"Dragon"[/b]  |  [b]Nincada[/b]  |  [b]Lvl 1[/b]  |  ♂[break][span style="padding:2px;line-height:12px;background:#A8B820;border-radius:2px;"][b]Bug[/b][/span] [span style="padding:2px;line-height:12px;background:#E0C068;border-radius:2px;"][b]Ground[/b][/span]

[table style="table-layout:auto;margin-right:0px;margin-left:auto;"][tbody][tr][td style="padding:3px;"][b]Max HP[/b][/td][td style="padding:3px;"][b]Attack[/b][/td][td style="padding:3px;"][b]Defense[/b][/td][td style="padding:3px;"][b]Speed[/b][/td][/tr][tr][td style="padding:3px;"]7[/td][td style="padding:3px;"]8
[/td][td style="padding:3px;"]12
[/td][td style="padding:3px;"]4
[/td][/tr][/tbody][/table][break]
[b]Ability:[/b] Compound Eyes: [b]+2[/b] to the DC of each accuracy check[break]
[b]Held item:[/b] none[break]
[b]Moves:[/b] Sand Attack, Scratch
   
[/div][/div][/div][/div]

[newclass=.hoverhelioptile,.hovernincada]display:none[/newclass]
[newclass=.parentnincada:hover .hovernincada]display:block[/newclass]
[newclass=.parenthelioptile:hover .hoverhelioptile]display:block[/newclass]

If that code is broken in any way beyond the hover being wonky, I likely copied it improperly.

[Bennett 🚀]

Aug 17, 2020 9:42:55 GMT -8 antimoany said:

I wanted hovering an image to reveal a div. I actually got it working as intended! It wasn't working the first time because the way I'm used to doing it, on another site, relied on an external library. Using standard CSS, it works fine!

I do have a related issue, however. When two such images are side-by-side, it is only possible to hover the leftmost image (unless I very carefully move my cursor down the div, in which case I can hover the other image). I'm sure I've made a simple mistake, but I can't figure out what that mistake is.

I did try putting pointer-events:none on the offending div, .hoverhelioptile, but it didn't help, so I removed it again.

If you have a style tag forum you can test this on, and can understand what I've done wrong, I'd appreciate guidance.

[nospaces][div][attr="style","width:67%; display:inline-block; margin-right:10px; vertical-align:top; font-size:14px"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/div]

[div][attr="style","width:30%; display:inline-block; vertical-align:top; text-align:right"]
[div][attr="class","parenthelioptile"][attr="style","display:inline-block"]
[div][attr="class","hoverhere"]
[a href="https://pokemonrapture.freeforums.net/post/1112"][img style="max-width:100%;" src="https://media.discordapp.net/attachments/742286317274005614/744667650063466566/Helioptile_sprite_ish.png"][/a]
[div style="margin-bottom:20px;background-color:#fde97375;border-radius:10px;padding:5px;"][attr="class","hoverhelioptile"]
[b]"Helioptile"[/b] | [b]Helioptile[/b] | [b]Lvl 1[/b] | ♂[break][span style="padding:2px;line-height:12px;background:#F8D030;border-radius:2px;"][b]Electric[/b][/span] [span style="padding:2px;line-height:12px;background:#A8A878;border-radius:2px;"][b]Normal[/b][/span]

[table style="table-layout:auto;margin-right:0px;margin-left:auto;"][tbody][tr][td style="padding:3px;"][b]Max HP[/b][/td][td style="padding:3px;"][b]Attack[/b][/td][td style="padding:3px;"][b]Defense[/b][/td][td style="padding:3px;"][b]Speed[/b][/td][/tr][tr][td style="padding:3px;"]8[/td][td style="padding:3px;"]10
[/td][td style="padding:3px;"]8
[/td][td style="padding:3px;"]14
[/td][/tr][/tbody][/table][break]
[b]Ability:[/b] Dry Skin: Water attacks heal 25% of its maximum HP; takes 25% more damage from Fire; in bright sunshine, loses 1/8 of its maximum HP each turn; in rain, recovers 1/8 of its maximum HP each turn[break]
[b]Held item:[/b] none[break]
[b]Moves:[/b] Mud-Slap, Tail Whip[/div][/div][/div]

[div][attr="class","parentnincada"][attr="style","display:inline-block"]
[div][attr="class","hoverhere"]
[a href="https://pokemonrapture.freeforums.net/post/843"][img src="https://cdn.bulbagarden.net/upload/8/8b/Spr_3r_290.png" style="max-width:100%;"][/a]
[div style="margin-bottom:20px;background-color:#e0d0d075;border-radius:10px;padding:5px;"][attr="class","hovernincada"]
[b]"Dragon"[/b] | [b]Nincada[/b] | [b]Lvl 1[/b] | ♂[break][span style="padding:2px;line-height:12px;background:#A8B820;border-radius:2px;"][b]Bug[/b][/span] [span style="padding:2px;line-height:12px;background:#E0C068;border-radius:2px;"][b]Ground[/b][/span]

[table style="table-layout:auto;margin-right:0px;margin-left:auto;"][tbody][tr][td style="padding:3px;"][b]Max HP[/b][/td][td style="padding:3px;"][b]Attack[/b][/td][td style="padding:3px;"][b]Defense[/b][/td][td style="padding:3px;"][b]Speed[/b][/td][/tr][tr][td style="padding:3px;"]7[/td][td style="padding:3px;"]8
[/td][td style="padding:3px;"]12
[/td][td style="padding:3px;"]4
[/td][/tr][/tbody][/table][break]
[b]Ability:[/b] Compound Eyes: [b]+2[/b] to the DC of each accuracy check[break]
[b]Held item:[/b] none[break]
[b]Moves:[/b] Sand Attack, Scratch

[/div][/div][/div][/div]

[newclass=.hoverhelioptile,.hovernincada]display:none[/newclass]
[newclass=.parentnincada:hover .hovernincada]display:block[/newclass]
[newclass=.parenthelioptile:hover .hoverhelioptile]display:block[/newclass]

If that code is broken in any way beyond the hover being wonky, I likely copied it improperly.

If you don't need them to be on the same line, then this is possible. Otherwise, having them on the same line and showing a block div below them is going to cause major reflows of the layout and will always be a hard hover to get right.
Here's them on new lines, which makes it super easy:

[nospaces]
[div]
[attr="style","width:67%; display:inline-block; margin-right:10px; vertical-align:top; font-size:14px"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div]

[div]
[attr="style","width:30%; display:inline-block; vertical-align:top; text-align:right"]
[div]
[attr="class","hoverable"]
[a href="https://pokemonrapture.freeforums.net/post/1112"][img style="max-width:100%;" class="fr-fic fr-dii" src="https://media.discordapp.net/attachments/742286317274005614/744667650063466566/Helioptile_sprite_ish.png"][/a]
[div style="margin-bottom:20px;background-color:#fde97375;border-radius:10px;padding:5px;"]
[attr="class","hover-target"]
[strong]"Helioptile"[/strong] | [strong]Helioptile[/strong] | [strong]Lvl 1[/strong] | ♂[break]
[span style="padding:2px;line-height:12px;background:#F8D030;border-radius:2px;"][strong]Electric[/strong][/span] [span style="padding:2px;line-height:12px;background:#A8A878;border-radius:2px;"][strong]Normal[/strong][/span]

[table style="table-layout:auto;margin-right:0px;margin-left:auto;"][tbody][tr][td style="padding:3px;"]
[strong]Max HP[/strong]
[/td][td style="padding:3px;"]
[strong]Attack[/strong]
[/td][td style="padding:3px;"]
[strong]Defense[/strong]
[/td][td style="padding:3px;"]
[strong]Speed[/strong]
[/td][/tr][tr][td style="padding:3px;"]8[/td][td style="padding:3px;"]10[/td][td style="padding:3px;"]8[/td][td style="padding:3px;"]14[/td][/tr][/tbody][/table]
[break]
[strong]Ability:[/strong] Dry Skin: Water attacks heal 25% of its maximum HP; takes 25% more damage from Fire; in bright sunshine, loses 1/8 of its maximum HP each turn; in rain, recovers 1/8 of its maximum HP each turn[break]
[strong]Held item:[/strong] none[break]
[strong]Moves:[/strong] Mud-Slap, Tail Whip[/div]
[/div]
[div]
[attr="class","hoverable"]
[a href="https://pokemonrapture.freeforums.net/post/843"][img style="max-width:100%;" src="https://cdn.bulbagarden.net/upload/8/8b/Spr_3r_290.png" class="fr-fic fr-dii"][/a]
[div style="margin-bottom:20px;background-color:#e0d0d075;border-radius:10px;padding:5px;"]
[attr="class","hover-target"]
[target name="nincada"]
[strong]"Dragon"[/strong] | [strong]Nincada[/strong] | [strong]Lvl 1[/strong] | ♂[break]
[span style="padding:2px;line-height:12px;background:#A8B820;border-radius:2px;"][strong]Bug[/strong][/span] [span style="padding:2px;line-height:12px;background:#E0C068;border-radius:2px;"][strong]Ground[/strong][/span]

[table style="table-layout:auto;margin-right:0px;margin-left:auto;"][tbody][tr][td style="padding:3px;"][strong]Max HP[/strong][/td][td style="padding:3px;"][strong]Attack[/strong][/td][td style="padding:3px;"][strong]Defense[/strong][/td][td style="padding:3px;"][strong]Speed[/strong][/td][/tr][tr][td style="padding:3px;"]7[/td][td style="padding:3px;"]8[/td][td style="padding:3px;"]12[/td][td style="padding:3px;"]4[/td][/tr][/tbody][/table]
[break]
[strong]Ability:[/strong] Compound Eyes: [strong]+2[/strong] to the DC of each accuracy check[break]
[strong]Held item:[/strong] none[break]
[strong]Moves:[/strong] Sand Attack, Scratch[/div]
[/div]
[/div]

[newclass=".hover-target"]display: none;[/newclass]
[newclass=".hoverable a"]display: block;[/newclass]
[newclass=".hoverable a:hover + .hover-target"]display:block;[/newclass]

However, if you are an administrator on your forum, I have a plugin that I've been working on that could be of use to make the inline items work.

[antimoany]

bennett Thank you so much for your help! You JS plugin is very cool, but unless I want JS for other reasons too I'm unlikely to ask the admin to install it.

Same line was the ideal, but with a bit of experimentation I got the exact code you provided to work very nicely (all I did was have the parent div's width change on hover so I wasn't wasting space when it wasn't being used. I'm fussy about that.)

Here's the exact code I used, if you or anyone else is curious:
[nospaces]

[div][attr="class","hover-parent"][attr="style","width:10%; float: right; display:inline-block; vertical-align:top; text-align:right"]
[div]
[attr="class","hoverable"]
[a href="https://pokemonrapture.freeforums.net/post/1112"][img style="max-width:100%;" class="fr-fic fr-dii" src="https://media.discordapp.net/attachments/742286317274005614/744667650063466566/Helioptile_sprite_ish.png"][/a]
[div style="margin-bottom:20px;background-color:#fde97375;border-radius:10px;padding:5px;"]
[attr="class","hover-target"]
[strong]"Helioptile"[/strong] | [strong]Helioptile[/strong] | [strong]Lvl 1[/strong] | ♂[break]
[span style="padding:2px;line-height:12px;background:#F8D030;border-radius:2px;"][strong]Electric[/strong][/span] [span style="padding:2px;line-height:12px;background:#A8A878;border-radius:2px;"][strong]Normal[/strong][/span]

[table style="table-layout:auto;margin-right:0px;margin-left:auto;"][tbody][tr][td style="padding:3px;"]
[strong]Max HP[/strong]
[/td][td style="padding:3px;"]
[strong]Attack[/strong]
[/td][td style="padding:3px;"]
[strong]Defense[/strong]
[/td][td style="padding:3px;"]
[strong]Speed[/strong]
[/td][/tr][tr][td style="padding:3px;"]8[/td][td style="padding:3px;"]10[/td][td style="padding:3px;"]8[/td][td style="padding:3px;"]14[/td][/tr][/tbody][/table]
[break]
[strong]Ability:[/strong] Dry Skin: Water attacks heal 25% of its maximum HP; takes 25% more damage from Fire; in bright sunshine, loses 1/8 of its maximum HP each turn; in rain, recovers 1/8 of its maximum HP each turn[break]
[strong]Held item:[/strong] none[break]
[strong]Moves:[/strong] Mud-Slap, Tail Whip[/div]
[/div]
[div]
[attr="class","hoverable"]
[a href="https://pokemonrapture.freeforums.net/post/843"][img style="max-width:100%;" src="https://cdn.bulbagarden.net/upload/8/8b/Spr_3r_290.png" class="fr-fic fr-dii"][/a]
[div style="margin-bottom:20px;background-color:#e0d0d075;border-radius:10px;padding:5px;"]
[attr="class","hover-target"]
[strong]"Dragon"[/strong] | [strong]Nincada[/strong] | [strong]Lvl 1[/strong] | ♂[break]
[span style="padding:2px;line-height:12px;background:#A8B820;border-radius:2px;"][strong]Bug[/strong][/span] [span style="padding:2px;line-height:12px;background:#E0C068;border-radius:2px;"][strong]Ground[/strong][/span]

[table style="table-layout:auto;margin-right:0px;margin-left:auto;"][tbody][tr][td style="padding:3px;"][strong]Max HP[/strong][/td][td style="padding:3px;"][strong]Attack[/strong][/td][td style="padding:3px;"][strong]Defense[/strong][/td][td style="padding:3px;"][strong]Speed[/strong][/td][/tr][tr][td style="padding:3px;"]7[/td][td style="padding:3px;"]8[/td][td style="padding:3px;"]12[/td][td style="padding:3px;"]4[/td][/tr][/tbody][/table]
[break]
[strong]Ability:[/strong] Compound Eyes: [strong]+2[/strong] to the DC of each accuracy check[break]
[strong]Held item:[/strong] none[break]
[strong]Moves:[/strong] Sand Attack, Scratch[/div]
[/div]
[/div]

[div][attr="class","content-variable"]
[attr="style","width:87%; display:inline-block; float: left; margin-right:10px; vertical-align:top; font-size:14px"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div]



[newclass=".hover-target"]display: none;[/newclass]
[newclass=".hoverable a"]display: block;[/newclass]
[newclass=".hoverable a:hover + .hover-target"]display:block;[/newclass]
[newclass=".hover-parent:hover"]width:30% !important[/newclass]
[newclass=".hover-parent:hover ~ .content-variable"]width:67% !important[/newclass]
[newclass=".hover-parent,.content-variable"]-moz-transition: width 0.3s; transition: width 0.3s[/newclass]

And a link to a post that demonstrates its uage: pokemonrapture.freeforums.net/post/1182

[Lynx]

If you were looking at my post in that thread - please IGNORE IT. The information in my post, as was stated later, is NOT correct. I've edited that post.