I was just wondering if you don't change the values, do hover
, active
and focus
automatically inherit settings from the standard a
tag?
For example:
.wrapper .left .main .row .holder .more a,
#content .wrapper .left .main .row .holder .more a:visited
{
width: 92px;
min-width: 92px;
max-width: 92px;
height: 23px;
min-height: 23px;
max-height: 23px;
display: block;
margin: 0px auto;
background: #fff url(../images/more-info-btn.png) top left no-repeat;
}
#content .wrapper .left .main .row .holder .more a:hover {
width: 92px;
min-width: 92px;
max-width: 92px;
height: 23px;
min-height: 23px;
max-height: 23px;
display: block;
margin: 0px auto;
background: #fff url(../images/more-info-btn.png) bottom left no-repeat;
}
Would the below do the same thing?
#content .wrapper .left .main .row .holder .more a,
#content .wrapper .left .main .row .holder .more a:visited
{
width: 92px;
min-width: 92px;
max-width: 92px;
height: 23px;
min-height: 23px;
max-height: 23px;
display: block;
margin: 0px auto;
background: #fff url(../images/more-info-btn.png) top left no-repeat;
}
#content .wrapper .left .main .row .holder .more a:hover {
background: #fff url(../images/more-info-btn.png) bottom left no-repeat;
}
You need a dedicated visual indicator. This could be an outline, a highlight, any sort of shape or pattern that is different from the hover state. Focus states cannot be the same as the hover states. However the hover state should be included with the focus styles.
Hover: by putting your cursor over it. A hovered element is ready to be activated with a mouse or any mouse-emulating technology (such as eye and motion tracking). Focus: a focused element is ready to be activated with a keyboard or any keyboard-emulating technology (such as switch devices).
A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.
Yes thats correct, pseudo states inherit values.
For consistency purposes, it is best to only declare the styles which you are changing in your psuedo state rules.
With the following code, the text will always be font-size:1.9em
, with padding-top:10px
regardless of :hover
state:
a
{
color:red;
font-size:1.9em;
padding-top:10px;
}
a:hover
{
color:green;
}
-- SEE EXAMPLE --
No, because an a
element in one of the states is still an a
element, and an element cannot inherit from itself. But any setting that has a
as the selector applies when the element is in one of the states, too.
Thus, when you want some properties to apply to a
elements in all states, then it suffices to set them using the a
selector.
Technically, the two sets of rules in your question are not equivalent, due to differences in selectors, which affect specificity. Situations where this would matter are rare and would involve rather special rules in other stylesheets being applied.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With