❤ [v2 Mini-Guide] The "hover" pseudo-class ❤

[Veravore]

Knight Yoshi

Exactly.
For instance in the background shorthand, if you just use background: red the background-image property's initial value is none, so the browser will read background: red as background: none red (may convert the color name to hex or RGB). Because the background-image property is not explicitly defined in the shorthand. All shorthand properties work this way.

Awesome, thank you very much for the help 3nodding
I'll be investigating and learning a bit more myself then updating this post.

[Knight Yoshi]

Veravore

Knight Yoshi

Veravore

Lady Saxophone

▧▧▧ ♬ ▧▧▧
Just more nit-picking... ninja
It's technically called a "psuedo", not a selector (specifically "psuedo-class", but most people use "psuedo" for short)

If you're curious about psuedos though, there are plenty of others you can use on Gaia profiles.
Most commonly, people use :hover, :before, :after, and :nth-child() ones.
[ MDN Article ]

▧▧▧▧▧▧▧

It's all good! I actually learned something so, it was worth both yours and my own time, I'd say. 3nodding

Knight Yoshi

This is what I found based on "Pseudo-classes" on w3schools; CSS Pseudo Classes
I learn a lot from w3schools, but new references are also nice.

Wrong. The transition does not have to be declared in both the original and hover state. It's only required to be in the original state of the element - unless you are explicitly changing something, the timing function, delay, etc.

Also :before and :after are not pseudo-classes, they are pseudo-elements.

@OP~ I recommend not linking to W3Schools as it's not the best place for reliable information. You should use the MDN, Mozilla Developer Network.

Also if you're going to use transition in your example, don't just use 1s. As omitting any value in a shorthand property uses the initial value for the explicit property. Show users what properties are changing in the transition explicitly instead of using the implied initial value, all.

I've found w3schools to be quite informational myself, but I don't generally use 1 reference, I usually try cross-reference Guides/Tutorials/Documentations.

Also; could you maybe dumb that down for me? About using the transition in my example, I'm fairly newer to this, but I have a general idea. I mean, I could be more informational, as to imply what "s" is, maybe make it "1.0s"...? and so on, but otherwise I'm clueless o.o

I believe Fredy-San pointed out to me that I only needed it in the initial panel being effected, as-well.

I'll just say that I, as a web developer, nor any other developer I know would reference W3Schools. Lol.
Really the only needed sources would be the W3C, World Wide Web Consortium, which makes most of the standards used on the web. However, they get too technical in the sense that they go beyond CSS property name, use, values. They also cover how browsers should implement it, so for someone with less experience, that's going to be overwhelming. So you can go to the MDN, Mozilla Developer Network, as I mentioned and just review a CSS properties name, use, values, initial value, and so on - essentially just the stuff you need to know.

Okay, so the transition property is a shorthand for transition-delay, transition-duration, transition-property, transition-timing-function. If you omit any value that's used in the explicit property it uses the explicit property's initial value, it's default value. So if you say transition: 1s, all you're really declaring is the transition-duration, the amount of time it should take for the transitions to happen, in the shorthand.
So all properties that can be transitioned will change with the same duration.

I get what you're saying, I think, so it's like using background-position, background-repeat, and background-attachment with just the "background" property? Except, in this case it's the Transition property? I'm also assuming applying those values to just the "background" property is what makes it a "shorthand" property? o;

Thank you for the information though emotion_c8

background: url(img.blah.com) center center no-repeat fixed;

Exactly.
For instance in the background shorthand, if you just use background: red the background-image property's initial value is none, so the browser will read background: red as background: none red (may convert the color name to hex or RGB). Because the background-image property is not explicitly defined in the shorthand. All shorthand properties work this way.

[Veravore]

Knight Yoshi

Veravore

Lady Saxophone

▧▧▧ ♬ ▧▧▧
Just more nit-picking... ninja
It's technically called a "psuedo", not a selector (specifically "psuedo-class", but most people use "psuedo" for short)

If you're curious about psuedos though, there are plenty of others you can use on Gaia profiles.
Most commonly, people use :hover, :before, :after, and :nth-child() ones.
[ MDN Article ]

▧▧▧▧▧▧▧

It's all good! I actually learned something so, it was worth both yours and my own time, I'd say. 3nodding

Knight Yoshi

This is what I found based on "Pseudo-classes" on w3schools; CSS Pseudo Classes
I learn a lot from w3schools, but new references are also nice.

Wrong. The transition does not have to be declared in both the original and hover state. It's only required to be in the original state of the element - unless you are explicitly changing something, the timing function, delay, etc.

Also :before and :after are not pseudo-classes, they are pseudo-elements.

@OP~ I recommend not linking to W3Schools as it's not the best place for reliable information. You should use the MDN, Mozilla Developer Network.

Also if you're going to use transition in your example, don't just use 1s. As omitting any value in a shorthand property uses the initial value for the explicit property. Show users what properties are changing in the transition explicitly instead of using the implied initial value, all.

I've found w3schools to be quite informational myself, but I don't generally use 1 reference, I usually try cross-reference Guides/Tutorials/Documentations.

Also; could you maybe dumb that down for me? About using the transition in my example, I'm fairly newer to this, but I have a general idea. I mean, I could be more informational, as to imply what "s" is, maybe make it "1.0s"...? and so on, but otherwise I'm clueless o.o

I believe Fredy-San pointed out to me that I only needed it in the initial panel being effected, as-well.

I'll just say that I, as a web developer, nor any other developer I know would reference W3Schools. Lol.
Really the only needed sources would be the W3C, World Wide Web Consortium, which makes most of the standards used on the web. However, they get too technical in the sense that they go beyond CSS property name, use, values. They also cover how browsers should implement it, so for someone with less experience, that's going to be overwhelming. So you can go to the MDN, Mozilla Developer Network, as I mentioned and just review a CSS properties name, use, values, initial value, and so on - essentially just the stuff you need to know.

Okay, so the transition property is a shorthand for transition-delay, transition-duration, transition-property, transition-timing-function. If you omit any value that's used in the explicit property it uses the explicit property's initial value, it's default value. So if you say transition: 1s, all you're really declaring is the transition-duration, the amount of time it should take for the transitions to happen, in the shorthand.
So all properties that can be transitioned will change with the same duration.

I get what you're saying, I think, so it's like using background-position, background-repeat, and background-attachment with just the "background" property? Except, in this case it's the Transition property? I'm also assuming applying those values to just the "background" property is what makes it a "shorthand" property? o;

Thank you for the information though emotion_c8

background: url(img.blah.com) center center no-repeat fixed;

[Knight Yoshi]

Veravore

Lady Saxophone

▧▧▧ ♬ ▧▧▧
Just more nit-picking... ninja
It's technically called a "psuedo", not a selector (specifically "psuedo-class", but most people use "psuedo" for short)

If you're curious about psuedos though, there are plenty of others you can use on Gaia profiles.
Most commonly, people use :hover, :before, :after, and :nth-child() ones.
[ MDN Article ]

▧▧▧▧▧▧▧

It's all good! I actually learned something so, it was worth both yours and my own time, I'd say. 3nodding

Knight Yoshi

This is what I found based on "Pseudo-classes" on w3schools; CSS Pseudo Classes
I learn a lot from w3schools, but new references are also nice.

Wrong. The transition does not have to be declared in both the original and hover state. It's only required to be in the original state of the element - unless you are explicitly changing something, the timing function, delay, etc.

Also :before and :after are not pseudo-classes, they are pseudo-elements.

@OP~ I recommend not linking to W3Schools as it's not the best place for reliable information. You should use the MDN, Mozilla Developer Network.

Also if you're going to use transition in your example, don't just use 1s. As omitting any value in a shorthand property uses the initial value for the explicit property. Show users what properties are changing in the transition explicitly instead of using the implied initial value, all.

I've found w3schools to be quite informational myself, but I don't generally use 1 reference, I usually try cross-reference Guides/Tutorials/Documentations.

Also; could you maybe dumb that down for me? About using the transition in my example, I'm fairly newer to this, but I have a general idea. I mean, I could be more informational, as to imply what "s" is, maybe make it "1.0s"...? and so on, but otherwise I'm clueless o.o

I believe Fredy-San pointed out to me that I only needed it in the initial panel being effected, as-well.

I'll just say that I, as a web developer, nor any other developer I know would reference W3Schools. Lol.
Really the only needed sources would be the W3C, World Wide Web Consortium, which makes most of the standards used on the web. However, they get too technical in the sense that they go beyond CSS property name, use, values. They also cover how browsers should implement it, so for someone with less experience, that's going to be overwhelming. So you can go to the MDN, Mozilla Developer Network, as I mentioned and just review a CSS properties name, use, values, initial value, and so on - essentially just the stuff you need to know.

Okay, so the transition property is a shorthand for transition-delay, transition-duration, transition-property, transition-timing-function. If you omit any value that's used in the explicit property it uses the explicit property's initial value, it's default value. So if you say transition: 1s, all you're really declaring is the transition-duration, the amount of time it should take for the transitions to happen, in the shorthand.
So all properties that can be transitioned will change with the same duration.

[Veravore]

Lady Saxophone

▧▧▧ ♬ ▧▧▧
Just more nit-picking... ninja
It's technically called a "psuedo", not a selector (specifically "psuedo-class", but most people use "psuedo" for short)

If you're curious about psuedos though, there are plenty of others you can use on Gaia profiles.
Most commonly, people use :hover, :before, :after, and :nth-child() ones.
[ MDN Article ]

▧▧▧▧▧▧▧

It's all good! I actually learned something so, it was worth both yours and my own time, I'd say. 3nodding

Knight Yoshi

This is what I found based on "Pseudo-classes" on w3schools; CSS Pseudo Classes
I learn a lot from w3schools, but new references are also nice.

Wrong. The transition does not have to be declared in both the original and hover state. It's only required to be in the original state of the element - unless you are explicitly changing something, the timing function, delay, etc.

Also :before and :after are not pseudo-classes, they are pseudo-elements.

@OP~ I recommend not linking to W3Schools as it's not the best place for reliable information. You should use the MDN, Mozilla Developer Network.

Also if you're going to use transition in your example, don't just use 1s. As omitting any value in a shorthand property uses the initial value for the explicit property. Show users what properties are changing in the transition explicitly instead of using the implied initial value, all.

I've found w3schools to be quite informational myself, but I don't generally use 1 reference, I usually try cross-reference Guides/Tutorials/Documentations.

Also; could you maybe dumb that down for me? About using the transition in my example, I'm fairly newer to this, but I have a general idea. I mean, I could be more informational, as to imply what "s" is, maybe make it "1.0s"...? and so on, but otherwise I'm clueless o.o

I believe Fredy-San pointed out to me that I only needed it in the initial panel being effected, as-well.

[Knight Yoshi]

Lady Saxophone

▧▧▧ ♬ ▧▧▧

Veravore

Padding, and width are both being used in mine, so I just included them :p
They probably could have just done it themselves but oh-well. Pfahaha.
As-for the Display Property, I'll remove that and see if it still works properly.

Lastly; I'll have to look into that! ;o I'm assuming it makes them drop-down at a set rate, instead of dropping down all darty and immediately? If I can't figure it out, I may need your assistance! cx But, I've figured everything else out so far, so, I should be able to comprehend it.

xd Thought so ~
Transition timing will just make the drop down smoother -- like the panels on my profile have a transition so that they gradually expand and contract.

It would be something like:
selector {
overflow: hidden;
height: #px;
transition: #s;
}

selector:hover {
overflow: auto;
height: #px;
transition: #s;
}
(Transitions can also be done in milliseconds (ms) -- I just did seconds (s) as a default)

▧▧▧▧▧▧▧

Veravore

Wrong. The transition does not have to be declared in both the original and hover state. It's only required to be in the original state of the element - unless you are explicitly changing something, the timing function, delay, etc.

Also :before and :after are not pseudo-classes, they are pseudo-elements.

@OP~ I recommend not linking to W3Schools as it's not the best place for reliable information. You should use the MDN, Mozilla Developer Network.

Also if you're going to use transition in your example, don't just use 1s. As omitting any value in a shorthand property uses the initial value for the explicit property. Show users what properties are changing in the transition explicitly instead of using the implied initial value, all.

[Lady Saxophone]

▧▧▧ ♬ ▧▧▧
Just more nit-picking... ninja
It's technically called a "psuedo", not a selector (specifically "psuedo-class", but most people use "psuedo" for short)

If you're curious about psuedos though, there are plenty of others you can use on Gaia profiles.
Most commonly, people use :hover, :before, :after, and :nth-child() ones.
[ MDN Article ]

▧▧▧▧▧▧▧

[Veravore]

Bump; updated. 3nodding

[milkywei]

ah, this helped me a lot.
thank you to you both! <3

[Lady Saxophone]

▧▧▧ ♬ ▧▧▧

Veravore

That's what I thought it might be ^.^
Sounds awesome, I don't like how they dart open immediately, so I'll add a transition.
Also; you were right about the Display Property, thank you. cx
I'm fairy new to CSS, so all the tips are quite wonderful.

EDIT: There we go, that should be better :33
It certainly is better on my profile! Bahah.

;D Yup ~ Keep experimenting and trying new little things and you can add some fancy things to even your simple layout!

P.S. If you don't want them to retract so quickly, you'll want to add a transition to the un-hovered selector as well o3o

▧▧▧▧▧▧▧

[Veravore]

Lady Saxophone

▧▧▧ ♬ ▧▧▧

Veravore

Padding, and width are both being used in mine, so I just included them :p
They probably could have just done it themselves but oh-well. Pfahaha.
As-for the Display Property, I'll remove that and see if it still works properly.

Lastly; I'll have to look into that! ;o I'm assuming it makes them drop-down at a set rate, instead of dropping down all darty and immediately? If I can't figure it out, I may need your assistance! cx But, I've figured everything else out so far, so, I should be able to comprehend it.

xd Thought so ~
Transition timing will just make the drop down smoother -- like the panels on my profile have a transition so that they gradually expand and contract.

It would be something like:
selector {
overflow: hidden;
height: #px;
transition: #s;
}

selector:hover {
overflow: auto;
height: #px;
transition: #s;
}
(Transitions can also be done in milliseconds (ms) -- I just did seconds (s) as a default)

▧▧▧▧▧▧▧

That's what I thought it might be ^.^
Sounds awesome, I don't like how they dart open immediately, so I'll add a transition.
Also; you were right about the Display Property, thank you. cx
I'm fairy new to CSS, so all the tips are quite wonderful.

EDIT: There we go, that should be better :33
It certainly is better on my profile! Bahah.

[Lady Saxophone]

▧▧▧ ♬ ▧▧▧

Veravore

Padding, and width are both being used in mine, so I just included them :p
They probably could have just done it themselves but oh-well. Pfahaha.
As-for the Display Property, I'll remove that and see if it still works properly.

Lastly; I'll have to look into that! ;o I'm assuming it makes them drop-down at a set rate, instead of dropping down all darty and immediately? If I can't figure it out, I may need your assistance! cx But, I've figured everything else out so far, so, I should be able to comprehend it.

xd Thought so ~
Transition timing will just make the drop down smoother -- like the panels on my profile have a transition so that they gradually expand and contract.

It would be something like:
selector {
overflow: hidden;
height: #px;
transition: #s;
}

selector:hover {
overflow: auto;
height: #px;
transition: #s;
}
(Transitions can also be done in milliseconds (ms) -- I just did seconds (s) as a default)

▧▧▧▧▧▧▧

[Veravore]

Lady Saxophone

▧▧▧ ♬ ▧▧▧
You might want to add overflow: auto for the :hover state, in case the person's content stretches beyond the assigned height value c;
Adding a transition time helps makes things smoother as well.

As a side note, the width, padding, and display properties aren't really needed...

▧▧▧▧▧▧▧

Padding, and width are both being used in mine, so I just included them :p
They probably could have just done it themselves but oh-well. Pfahaha.
As-for the Display Property, I'll remove that and see if it still works properly.

Lastly; I'll have to look into that! ;o I'm assuming it makes them drop-down at a set rate, instead of dropping down all darty and immediately? If I can't figure it out, I may need your assistance! cx But, I've figured everything else out so far, so, I should be able to comprehend it.

[Lady Saxophone]

▧▧▧ ♬ ▧▧▧
You might want to add overflow: auto for the :hover state, in case the person's content stretches beyond the assigned height value c;
Adding a transition time helps makes things smoother as well.

As a side note, the width, padding, and display properties aren't really needed...

▧▧▧▧▧▧▧

[Veravore]

Hello, and welcome!
This thread is going to cover some of the basics using the "hover" pseudo-class.
My profile can be used as a visual example for some hover actions.


What is a "pseudo-class"?
A pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected.
For example ":hover" will apply a style when the user hovers over the element specified by the selector.
In simpler terms; using a pseudo-class allows you to apply properties & values to a special state of the selector.

You can learn more about pseudo-classes here; MDN CSS Pseudo-classes

Applying the ":hover" pseudo-class
To begin, you'll need to choose a selector to start off with.
For example; if you were going to do this with the "about me" panel..
You'd use the selector; "#id_about", and again w/the pseudo-class; ":hover"

Now lets apply the ":hover" pseudo-class to your desired selector.
This is the basic structure, just change the selector.

selector {
height: #px;
width: #px;
overflow: hidden;
transition: 1s;
}

selector:hover {
height: #px;
width: #px;
overflow: hidden;
}

After you've done that, you can apply some cool properties.

For example; you could do something like this.

#id_about {
height: 58px;
width: 34px;
border: solid 2px #000000;
border-radius: 100%;
overflow: hidden;
transition: 1s;
}

#id_about:hover {
height: 212px;
width: 168px;
overflow: hidden;
-ms-transform: rotate(360deg) /* IE 9 */
-webkit-transform: rotate(360deg) /* Chrome, Safari, Opera */
transform: rotate(360deg)
}

Initially; the "about me" would be a small circle, containing the Header.
When the "about me" is hovered, it will become a larger circle, and rotate clockwise 360 degrees.

The "transition" shorthand property
"Transition" is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
the value; "1s" is effecting the longhand properties; transition-duration and transition-delay.
"s" represents a specified time in seconds, and "ms" represents a specified time in milliseconds.
I haven't applied any values to the other long-hand properties, "transition-property" & "transition-timing-function"
So, they will stay at their initial values of; transition-property: all, transition-timing-function: ease

You can learn more about the "transition" property here; MDN CSS Transition Property

Small Dimensions Reference
height - sets the height of the specified element
width - sets the width of the specified element
min-height - sets the minimum height of the specified element
max-height - sets the maximum height of the specified element
min-width - sets the minimum width of the specified element
max-width - sets the maximum width of the specified element


There's a variety of things you can do with this, and here are some references;

♥ MDN CSS Reference List ♥
♥ Opacity/Transparency ♥
♥ Transformations ♥
♥ Box-shadows ♥


Lastly; you can find a list of CSS properties, and values, ETC here; MDN CSS Reference
You can also find other guides/help from the Profile Discussion sub-forum below.

(Thread) CSS Properties/Style Sheet Solutions
(Thread) Profile Discussion Extended FAQ
(Thread) Learn to Code v2/Current Profiles

Please note; this thread is in the process of being updated.