Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does hover, active, focus states inherit values?

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;
}
like image 343
Brett Avatar asked Apr 17 '12 09:04

Brett


People also ask

Should hover and focus state be different?

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.

What's the difference between focus and hover?

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).

How can use active and hover in CSS?

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.


2 Answers

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 --

like image 61
Curtis Avatar answered Nov 15 '22 09:11

Curtis


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.

like image 41
Jukka K. Korpela Avatar answered Nov 15 '22 11:11

Jukka K. Korpela