XF 1.2 Prefix Hover Effect on Thread Creation

[Amaury]

I am trying to style the hover effect of prefixes when creating a thread the same way I did on the discussion list, but I am having a bit of trouble.

For reference, this is what I have for prefixes that appear in threads and forums. I want the hover effects to be the same on thread creation:

/* Thread Prefixes */

.prefix.prefixPrimary {
    color: @secondaryDarker !important;
    background: @secondaryLighter !important;
    border: 1px solid @secondaryLighter !important;
}

a.prefixLink:hover .prefixPrimary {
    color: @secondaryDarker !important;
    background-color: @inlineMod !important;
    border: 1px solid @inlineMod !important;
}

.prefix.prefixSecondary {
    color: @secondaryDarker !important;
    background-color: @secondaryLighter !important;
    border: 1px solid @secondaryLighter !important;
}

a.prefixLink:hover .prefixSecondary {
    color: @secondaryDarker !important;
    background-color: @inlineMod !important;
    border: 1px solid @inlineMod !important;
}

.prefix.prefixRed {
    border-color: #FF0000 !important;
}

a.prefixLink:hover .prefixRed {
    color: #FFFFFF !important;
    background: #CD0000 !important;
    border-color: #CD0000 !important;
}

a.prefixLink:hover .prefixGreen {
    color: #FFFFFF !important;
    background: #004E00 !important;
    border-color: #004E00 !important;
}

.prefix.prefixOlive {
    color: #FFFFFF !important;
}

a.prefixLink:hover .prefixOlive {
    color: #FFFFFF !important;
    background: #4E4E00 !important;
    border-color: #4E4E00 !important;
}

a.prefixLink:hover .prefixLightGreen {
    color: #000000 !important;
    background: #5EBC5E !important;
    border-color: #5EBC5E !important;
}

.prefix.prefixBlue {
    border-color: #0000FF !important;
}

a.prefixLink:hover .prefixBlue {
    color: #FFFFFF !important;
    background: #0000CD !important;
    border-color: #0000CD !important;
}

.prefix.prefixRoyalBlue {
    border-color: #4169E1 !important;
}

a.prefixLink:hover .prefixRoyalBlue {
    color: #FFFFFF !important;
    background: #0F37AF !important;
    border-color: #0F37AF !important;
}

a.prefixLink:hover .prefixSkyBlue {
    color: #FFFFFF !important;
    background: #559CB9 !important;
    border-color: #559CB9 !important;
}

.prefix.prefixGray {
    color: #FFFFFF !important;
    border-color: #808080 !important;
}

a.prefixLink:hover .prefixGray {
    color: #FFFFFF !important;
    background: #4E4E4E !important;
    border-color: #4E4E4E !important;
}

a.prefixLink:hover .prefixSilver {
    color: #000000 !important;
    background: #F2F2F2 !important;
    border-color: #F2F2F2 !important;
}

a.prefixLink:hover .prefixYellow {
    color: #000000 !important;
    background: #CDCD00 !important;
    border-color: #CDCD00 !important;
}

.prefix.prefixOrange {
    border-color: #FFA500 !important;
}

a.prefixLink:hover .prefixOrange {
    color: #FFFFFF !important;
    background: #CD7300 !important;
    border-color: #CD7300 !important;
}

/* Thread Prefixes */

Inspecting the element, it looks like it would have something to do with this:

.Popup .PopupControl:hover

I've tried the that, even being specific, to no avail:

.Popup .PopupControl:hover .prefixPrimary

If I remove the specificity, it'll style the hover effect of (No prefix), though, which I do want, but right now I want to get the prefixes themselves.

Here's a video showing what I'm trying to accomplish (watch in full screen and 1080p):

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[Amaury]

I think I'll make it different on the Create Thread page and just use this for everything:

.Popup .PopupControl:hover {
    background: @inlineMod !important;
}

That way there won't be conflicting border colors.

 

[Amaury]

I'm just going to give up for now. I've tried everything I could find, and it's just not working.

Any help?