My question is really simple, just what i am trying to do is :hover, :after and :before , i want hover anf after to embed in same element, check out my css code:-
#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
Here the element have an icon in :before which i cnt remove or modify, and also i want to have an hover effect on it...
Any solution for this, my console doesn't show the hovering effect?
Interesting question. If you're able to show us a working example we could probably be of more help.
However, in theory there's nothing wrong with what you're attempting to do (although not all browsers will like it: particularly IE8 and below).
The important thing to understand here is that :hover is a pseudo-class, whereas :before is a pseudo-element.
Here's a quick excerpt from the standard (with thanks to this answer previously on Stack Overflow):
Pseudo-classes are allowed anywhere in selectors while pseudo-elements
may only be appended after the last simple selector of the selector.
The mistake you're making is in your syntax: the order that you're appending them.
Try this instead:
#sidebar .widget li a:hover:before,
#sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
That should do as you wish. However this isn't going to give you great cross-browser coverage, it's not something that all browsers support of have implemented.
A better approach would be to:
reset the :before element to nothing (overwrite the styles you can't access);
use a non-repeated background image on the anchor instead (to display the image), and padding-left to give the indentation;
You can then switch the background-image in whatever fashion you see fit using :hover on the anchor in your CSS.
This will give you far better cross-browser compatibility.
Related
Ok, this might look like another stupid question, but I cant find answer.
See this fiddle:
Remove #Navigation in CSS declaration here:
#Navigation .stretch {
...
}
so it becomes:
.stretch {
...
}
Why browser (chrome Version 26.0.1410.64 m) ignore this rule?
I have tested also on firefox.
Probably it is not CSS priorities issue, because DevTools neither FireBug doesn't show it entirely. Not even overlined.
Thanks
EDIT: Many thanks guys! I couldn't see those crossed rules before, I was scrolling trough several times, in devTools and in fireBug and solving such a misserable "simple" problem for more than hour.
the rule defined only with .stretch selector is less specific than #navigator li, and it's not applied even if defined later on cascade. Thus display will be ever inline
It isn't ignored, it is overruled by #Navigation li because that selector is more specific. It sets display to inline (instead of your intended inline block).
You can easily spot this when you 'inspect element' in Chrome. It shows the styles of the element, and crosses out the overruled styles.
The issue is the #Navigation li has higher specificity than .stretch since it contains an id selector.
The reason you do not see it is because it is empty and you most likely select the previous element (on jsfiddle code).
If you select the empty li from firebug it shows it is overriden.
does anybody know if there's a way to create an CSS effect which looks like the light effect used for iPhone apps? I mean the upper, brighter part of the box.
Thanks,
Ron
Unfortunately since using :after and :before selectors on img elements is not covered by the specification, a pure CSS solution might not behave correctly:
This specification does not fully define the interaction of :before
and :after with replaced elements (such as IMG in HTML). This will be
defined in more detail in a future specification.
In the current versions of Chrome and Firefox, these selectors appear to be ignored and simply don't work on img elements.
Here's a solution with a small HTML wrapper that will fall back to not rendering when the CSS isn't supported. The container size needs to be specified here, but that could easily be set with JavaScript.
CSS
.shine {
width:223px;
height:223px;
position:relative;
overflow:hidden;
display:inline-block;
}
.shine:after {
width:150%;
height:100%;
position:absolute;
top:-45%;
left:-25%;
display:block;
content:"";
background:rgba(255,255,255,0.1);
border-radius:100%;
}
HTML
<span class="shine">
<img src="" alt="">
</span>
Result
To make this a little fancier, you could add a gradient background to .shine:after, but it works fine without to demonstrate the idea.
Here's a jsFiddle so you don't have to take my word for it.
I have never seen the effect you describe (would never use an iPhone) but I assume it is somehow animated?
Then you can do that in css if you use two images and blend them 'on hover'. You position the 'light icon' above the plain icon (typically using an :after pseudo selector in css) and control it's opacity value using a css :hover selector).
Is it possible to prefix the "li" items with a small image ? I didn't find a suitable css attribute for it.
You can use an image for the bullet point:
ul { list-style-image: url("fancybullet.gif"); }
Failing that, you cold set the list-style-type to none, and then use CSS to place an image in the right place, like in this article.
You could use the CSS :before pseudo-selector.
li:before { content: url(image.jpg); }
Note this may not work completely correct in IE8 and below. Here's some more information on the :before and :after selectors.
I feel you may be better off doing this in Javascript however using a library like jQuery. I assume this is a problem that needs a dynamic solution after HTML is rendered to the screen, in this case it may be best to use Javascript.
Say you, or I, have coded an HTML element...
<a id='hydrogen' href='#'>H</a>
...and some :hover CSS...
#hydrogen:hover {
background:red;
}
...and now we want to put a fancy hand cursor when hovering. There's two options for this:
apply to stateless element:
#hydrogen {
cursor:pointer;
}
or, apply to :hover state.
#hydrogen:hover {
color:red;
cursor:pointer;
}
My question: is there any reason(s) why one way is decisively better than the other?
...or is it tomato, tomato?
Compatibility: IE6 and below only recognize the :hover pseudo class on a elements.
They are both the same, provided you always want the pointer there, reguardless of hovering.
The :hover pseudo class will inherit cursor: pointer from its non hovered state.
I would prefer to put it on the normal selector, rather than :hover.
Both ways are equally good. However i would put it on the id itself as :hover does not work on ie6 or below if element is not an anchor. If you do not care about older versions of IE. Then both ways are correct.
I have a span in a li. According to both Firebug and Chrome inspector the span is inheriting list styles list-style-image, list-style-position, list-style-type. Which is not what I would expect given that a span is not a list element. Anyway, because of this (I assume) the span is not being positioned where I'd like it.
How can I stop this inheritance?
Thanks
According to the CSS specification, list-style properties only apply to elements with display:list-item. See here: http://www.w3.org/TR/CSS21/generate.html#lists
Therefore, the inherited list-style properties do not apply to the SPAN element, unless it has display:list-item set.
Look at Firebug and check which class is applying the styles to the span. Simply modify that style to fix your issue. Or put a screen grab of the Firebug inspect panel here, so we can have a look
I think your reading the information from Chrome and Firebug wrong or you've done a mistake in your CSS.
Normally, spans doesn't inherit any style related to list element automatically.
Paste your CSS, so we can help you.
You can't that is just the way CSS inheritance works,
You could negate the effects by adding this to the spans:
.className {
list-style-image:none;
list-style-position:inherit;
list-style-type:none;
}
Not that any of these should effect how the spans appear, more likely a rogue margin/padding, try using Eric Mayers CSSReset