Hover Issue

[• Ambrose •]

I'm trying to set up the hover so that when one goes over the "basics" section, it turns into the "desc" section, thus hiding the "basic."

I can't seem to figure out what I'm missing.

areion.boards.net/thread/962/canon-characters-wip (That's the template in question.)

SPOILER: Click to show

[div align="center"][div style="width:450px;background-color:#242124;"][div style="background-color:#5a354a;height:50px;line-height:50px;font-family:Charm;font-size:30px;text-shadow:1px 1px 1px #21171d;text-transform:lowercase;text-align:right;padding:10px;color:#bb6699;"]AREION FACILITY[/div][div style="float:left;width:125px;height:125px;border:5px solid #252321;"][img src="https://via.placeholder.com/125x125" style="max-width:100%;"][/div][div][attr="class","tab"][div][attr="class","namefemale"]Michelle Paige Odin[/div][div][attr="class","rolefemale"]Headmistress[/div]
[div][attr="class","basics"]33 ••• human ••• [i]amanda tapping[/i][/div][div][attr="class","desc"]Testing[/div][/div]

[div style="float:left;width:125px;height:125px;border:5px solid #252321;"][img src="https://via.placeholder.com/125x125" style="max-width:100%;"][/div][div][attr="class","tab"][div][attr="class","namemale"]Mikhos Paige Odin[/div][div][attr="class","rolemale"]Deputy Headmaster // Mentor of Music[/div]
[div][attr="class","basics"]39 ••• human ••• [i]timothy omundson[/i][/div][div][attr="class","desc"]Testing[/div][/div][/div]



[newclass=".tab"]float:right; width:310px; height:125px; background-color:#252321; border:5px solid #252321; border-left:0px;[/newclass]
[newclass=".basics"]margin-top:25px;text-transform:lowercase; font-family:Arial; font-size:9px;[/newclass]
[newclass=".desc"]float:right; margin-top:5px;width:295px; height:115px; padding:5px; opacity:0; transition-duration: 0.9s;-moz-transition-duration: 0.9s;-webkit-transition-duration: 0.9s;-o-transition-duration: 0.9s;[/newclass]
[newclass=".desc:hover]opacity:1.0;[/newclass]
[newclass=".namefemale"]text-align:center;color:#bb6699; font-family:Modern Antiqua; font-size:14px; text-transform:lowercase; text-shadow:1px 1px 1px #21171d; border-bottom:2px solid #bb6699; line-height:12px;[/newclass]
[newclass=".rolefemale"]text-align:right;color:#dbdedb;text-transform:uppercase;font-family:Aleo;font-size:10px;background-color:#5a354a; padding:3px;[/newclass]
[newclass=".namemale"]text-align:center;color:#627099; font-family:Modern Antiqua; font-size:14px; text-transform:lowercase; text-shadow:1px 1px 1px #21171d; border-bottom:2px solid #627099; line-height:12px;[/newclass]
[newclass=".rolemale"]text-align:right;color:#dbdedb;text-transform:uppercase;font-family:Aleo;font-size:10px;background-color:#2f4274; padding:3px;[/newclass]

[• Ambrose •]

We still haven't been able to figure it out...

[Todge]

What you are asking needs an element of JavaScript, and cannot be done natively with UBBC alone.

Therefore you will need either a plugin created to add a 'switching' function to posted content, or some script added to the footer of the page targeting a specific post/content and altering it accordingly.

[• Ambrose •]

I'm using a code that I found on a resource forum for my plotter and the hovering works there, and it doesn't seem to have any JavaScript included in the code... I also have a post template that uses the hovering, but doesn't have any JavaScript either.

We just can't figure out what the missing part is. We used copying the post template to my plotter and my post, but even then still have a hard time getting it to cover the basics section.

To clear up the confusion if any, we are trying to use class attributes with the style tags.

[Todge]

[attr] and [newclass] tags are not included in the UBBC tag list that PB uses, they are being enabled by the 'Style Tag' plug-in that you have installed on your forum that is using JavaScript to add the classnames and the required CSS Styling to get them to work, and as far as I can see they are working on the link you supplied.

[• Ambrose •]

Yes, we can get the hovering to work. It's covering over the basics we are trying to get it to do...