• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Modifying the hover state of controls

psTubble27

Well-known member
#3
I'm aware of that Style Properties page; however unless I'm mistaken, it modifies the control only when mouse is hovering over it. In other words, this is the control's hover state. I'm asking how I would go about modifying the hover state of other elements, which would alter the control's appearance.
 

Brogan

XenForo moderator
Staff member
#4
I don't understand what you're asking.

What I posted above is for general styling of the message controls.
There are separate pages for the focus, hover and active states, directly below.
 

psTubble27

Well-known member
#5
Ok if I hover over the username, and the Controls go from invisible to visible -- how do I do that?

I need to alter the username's hover state, am I right?
 

Brogan

XenForo moderator
Staff member
#6
The username is not part of the message controls.

I'm not sure what elements it is you're trying to change - your original post stated "How do we alter the hover state of message controls (e.g. "Like", "Edit")" but now you want the user name?

Which elements exactly are you trying to change?
What do you want them to do?
 

Brogan

XenForo moderator
Staff member
#8
What do you mean by "alter the visibility"?

My first post is the correct area to modify those elements when they are not hovered over.
 

psTubble27

Well-known member
#9
Sorry for the confusion :)

I want the controls to be invisible or barely visible when in their normal state, and fully visible when the user hovers over any area of the post.
 

psTubble27

Well-known member
#12
Interesting, now that I think about it, the RSS-feed buttons in the main forum_list behave exactly the same way, "on" only when the mouse hovers over that section of the forum.

There's got to be a simple way to replicate that here...
 

Steve F

Well-known member
#13
Add this to your EXTRA.css template for your style. Change the opacity to what ever you want.

Code:
.message .messageMeta .privateControls .item, .message .messageMeta .publicControls .item
{
    opacity: 0.1;
}
 
.message:hover .messageMeta .privateControls .item, .message:hover .messageMeta .publicControls .item
{
    opacity: 1;
}