XF 1.4 Inbox/Alerts Hover

Amaury

Well-known member
So I have this CSS for hovering over links in the Inbox and Alerts dropdowns:

Code:
.KHFlare .navPopup a:hover, .navPopup .listItemText a:hover {
    color: @contentText;
    text-decoration: none;
}

What CSS can I use to change the link color when the Inbox and Alerts dropdown menus' hover background is active, but the link itself isn't being hovered over?

Hover.webp

In this example, Test Conversation.
 
You're the man!

For better organization, I combined the two CSS pieces you gave me:

Code:
.KHFlare .navPopup .PopupItemLinkActive:hover .PopupItemLink, .PopupItemLinkActive:hover .subject {
    color: @contentText;
}

(y)
 
Sorry, @Dylan V! One more thing! :p

This is how I currently have it, using @contentText for the color in the CSS you gave me:

KHF Dropdown 1.webp KHF Dropdown 2.webp

For consistency, I want the text to be white on both styles when hovering there, which I can do by changing @contentText to @secondaryDarker, but as you'll see below in the screenshots, it looks like I need some more CSS to cover the plain text and the date/time stamp:

KHF Dropdown 3.webp KHF Dropdown 4.webp
 
Sorry, @Dylan V! One more thing! :p

This is how I currently have it, using @contentText for the color in the CSS you gave me:

View attachment 111954 View attachment 111955

For consistency, I want the text to be white on both styles when hovering there, which I can do by changing @contentText to @secondaryDarker, but as you'll see below in the screenshots, it looks like I need some more CSS to cover the plain text and the date/time stamp:

View attachment 111956 View attachment 111957
For me, everything changes when hovering the element:

Screenshot_1.webp

For the date, add this:
Code:
.navPopup .PopupItemLinkActive:hover .muted
{
        color: #000000;
}

Full code:
Code:
.navPopup .PopupItemLinkActive:hover .PopupItemLink,
.navPopup .PopupItemLinkActive:hover .subject,
.navPopup .PopupItemLinkActive:hover .muted
{
        color: #000000;
}
 
@Dylan (and anyone else), I was playing around with the styling, and it turns out that for the plain text, such as "replied to the thread," all I needed to do was to add a color value here. :oops:

Rich (BB code):
.navPopup .listItemText .muted {
    font-size: 11px;
}

.navPopup .PopupItemLinkActive:hover {
    color: @secondaryDarker;
    background-color: @inlineMod;
}

.navPopup .PopupItemLinkActive:hover .PopupItemLink,
.navPopup .PopupItemLinkActive:hover .subject,
.navPopup .PopupItemLinkActive:hover .muted,
.navPopup .PopupItemLinkActive:hover .username {
    color: @secondaryDarker;
}

That's what my code now looks like for the Inbox/Alerts dropdown area. The code shown in my post above was not needed.

Edit: This is what I previously had, which you can see is a bit messier:

Code:
.navPopup .listItemText .muted {
    font-size: 11px;
}

.navPopup .PopupItemLinkActive:hover {
    background-color: @inlineMod;
}

.navPopup .PopupItemLinkActive:hover .PopupItemLink, .PopupItemLinkActive:hover .subject {
    color: @secondaryDarker;
}

.navPopup a:hover, .navPopup .listItemText a:hover {
    color: @secondaryDarker;
}

.navPopup a:hover {
    color: @contentText;
}

.navPopup .PopupItemLinkActive:hover .muted {
    color: @secondaryDarker;
}

.navPopup .PopupItemLinkActive:hover h3 {
    color: @secondaryDarker;
}

.navPopup .PopupItemLinkActive:hover .username {
    color: @secondaryDarker;
}
 
Last edited:
Top Bottom