We have a carousel and wanting to have an active and hover state. We know the approved mention for adding a class style is through extended on the carousel tab. Example “CarouselTab”. Then for the active state we use “CarouselTab.active”.
In regards to the hover state I’ve tried “CarouselTab.hover” but without any success. I found a post regarding to a simple question and they we told to use a colon rather then the period such as “CarouselTab:hover”. This mention seems to be functioning properly.
Is this a proper mention? Can someone explain to me why this would work and the period does not?
:hover is a pseudo-class in CSS. .hover would be a reference to a class named hover, and they’re not the same. Pseudo-classes are meant to be used for behavior or other things that can change after a page has loaded. You will find in modern browsers that you can specify input:checked styles to influence how a checkbox or radio button will look when it’s checked, for example. There’s lots more of these.
Walter
On Jan 16, 2012, at 8:23 PM, TeamSDA wrote:
Hi All,
We have a carousel and wanting to have an active and hover state. We know the approved mention for adding a class style is through extended on the carousel tab. Example “CarouselTab”. Then for the active state we use “CarouselTab.active”.
In regards to the hover state I’ve tried “CarouselTab.hover” but without any success. I found a post regarding to a simple question and they we told to use a colon rather then the period such as “CarouselTab:hover”. This mention seems to be functioning properly.
Is this a proper mention? Can someone explain to me why this would work and the period does not?
:active can be applied only to a link, and then it appears (style-wise) only during the click event. Depending on how that event fires in your browser, this may be entirely invisible (because the moment the click happens, the page is unloading and nothing further happens to it visually). Note that the :active pseudo-class has nothing at all to do with the .active class used in Carousel. They share a name and nothing else.
Walter
On Jan 17, 2012, at 12:03 PM, TeamSDA wrote:
Hi Walter,
Now that makes sense, but why is it when I try using “CarouselTab:active” it doesn’t work?
Ok thank you for the explanation. So to confirm what we are doing with the hover pseudo-class is correct, as this is a behavior being performed my the browser.
Yes, the :hover is respected on all elements by most browsers, and on the a tag on IE < 9.
Walter
On Jan 17, 2012, at 4:14 PM, TeamSDA wrote:
Hi Walter,
Ok thank you for the explanation. So to confirm what we are doing with the hover pseudo-class is correct, as this is a behavior being performed my the browser.