Is it possible to get the first letter of an element while in 'hover mode'? This is how it would look - I think - but it's not working in Chrome 10:
p:hover:first-letter
or
p:first-letter:hover
Technically (imho) they're not the same. The first takes the first letter of the hovering element. The second takes the entire element if the first letter is hovering. I require the first.
As you can see on http://css4.hotblocks.nl if you 'enable' the CSS blocks, both don't work.
I want only the first letter of the element to color red, when the entire element is in :hover mode. Is it possible without additional HTML tags? Thanks.
-- edit I've changed my online example for the better. CSS is now divided in separate <style> blocks. Makes for easier turning on and off try-outs.
Conclusion - so far!? - is this: In Firefox 3.6/4 a:first-letter:hover does nothing (good) and a:hover:first-letter works perfectly (good!). In Chrome 10 a:first-letter:hover does nothing (good) and a:first-letter:hover breaks the previous CSS 'statement'. (In my example it breaks nothing because it's in a separate <style> block.) Which brings us to: once again Google Chrome lags behind Firefox =( --edit
I've checked your example and I have to say it works, on Fx 3.6.13
p:hover:first-letter {
color: blue
}
Only what you have to do, is change color of first letter. Because hover has the same color as text, so you didn't notice any visual change.
Both the :first-line and :first-letter pseudo-elements are defined in the spec as only applying to blocks. The a element is inline by default, so :first-letter doesn't apply to it unless you change it into a block element. I think Chrome is actually the one working correctly here, though it's inconvenient and I don't know why it didn't occur to the W3C that inline elements can have first letters too.
As an admittedly imperfect workaround, you could add a {display: inline-block} or similar in order to get the styling.
Related
I'm working on a intro-level project where I have begun to use aspect-ratio as a way to apply a few rules to some images. What I can't figure out is why VS Code suggests, auto-completes, and links to MDN Reference just like every other valid CSS selector, but for whatever reason it colors the text white. I've seen this before and it just goes away by itself sometimes or I move onto to a different project and forget about it.
Screenshot of the 'aspect-ratio' selector being white as opposed to the light blue of all of the other selectors.
I've re-written it a couple of times, moved the comments around and re-written the CSS selection entirely and it won't go away.
Preamble: This is a somewhat 'academic' question. I'm looking for an explanation and intelligent conjecture, not a practical solution (there is no real problem to "solve").
So, I notice that if I make a :hover selector set its display property to none, it has no discernible effect in Chrome (v23). In fact, no other properties in the selector are applied. It's as if the entire selector is ignored.
e.g.
<div class="myElement">Hover over this. Nothing happens!</div>
...
.myElement:hover {
display:none;
color:red;
}
(Check out the jsFiddle of this)
Obviously, since an element with display:none cannot be hovered, the element is instantly no longer becomes selected by the :hover selector, so loses the display:none property (and becomes eligible for selection again).
The paradoxical nature of this rule leads me to wonder why (for example) the display property doesn't toggle rapidly (every frame, or mouse move) as it does in other browsers (ie9, firefox). Although I think I prefer Chrome's implementation, I wonder why the other properties (e.g. color:red) aren't applied.
The question: is there some official documented reason why Chrome chooses to bail on this silly selector, or is this some kind of bug?
The question: is there some official documented reason why Chrome chooses to bail on this silly selector, or is this some kind of bug?
After looking at the render events that occur when you hover the link, it looks like Chrome actually renders this change in display (I originally thought Chrome was ignoring it for performance reasons). In 1.65s, it captured 11360 events recalculating style and layout because of this change in display.
So why don't you see a flicker? Chrome is rendering the change at such a fast rate you won't see the change (or the browser just doesn't render it). When you switch to visibility: hidden, you see that flickr because the item is still in the render tree, just hidden (plus, it's slower, a lot less render events are firing).
I wonder why the other properties (e.g. color:red) aren't applied.
It's cascading, so the display: none is applied, then the red color. The same reason why you never see the hover state is the same reason why you don't see the color change.
Hope that helps!
I think display:none and hover at same time is causing the confusion to the browser. It works with visibility:hidden though.
display:block;
visibility:hidden;
color:red;
you can check it here: http://jsfiddle.net/MnZyx/2/
I have read in this sitepoint page and quirksmode page about the new :empty pseudoclass.
Sitepoint said that even when there is dynamic content appended, the empty style will still take effect. It is noted that firefox was the one who behaves this way.
Quirksmode said that it discards the empty state when it it filled in with some elements or text. the demo on this site works in my browser (chrome 19). So i assumed only firefox would be buggy.
However I have this piece of code in my plugin, which dynamically fills up a list with items, it doesn't seem to work, here's a fiddle which appends list items, even if you click the button, the items won't appear until you try to debug it in the console (they magically appear when you click the <li> in the element tree).
Why is this happening, and is there a work around to "force-discard" the empty style?
I know there are other ways to do what I am doing in the fiddle (and currently doing one of these "other ways"), but the :empty method is a lot easier.
UPDATE:
added a remove item button. when the last item is removed, the list should disappear - still doesn't work. hmmm.. i'll try to check in another browser.
FIX
Temporary fix/alternative to using :empty and display:none is to have the element have zero width, height, borders, margins, and paddings. additionally, position:absolute to remove it from the flow.
The fiddle you provided works for me with FF10 and IE9. It only fails in Chrome (18+)
Not sure why this happens, as the quirksmode page works in Chrome as well..
For the force-discard it seems to be do-able by setting almost any css property with code..
example at http://jsfiddle.net/gaby/YprUV/9/
Update
Ok, i found this Chrome bug report that is about :empty selector misbehaving when used with display:none
It is marked as fixed, but perhaps we should re-oopen it..
Here is a test that does not use display:none (it just changes the background color) and it works just fine.. http://jsfiddle.net/YprUV/11/
I have a div that on hover will change positioning on an image and toggle a div via css. The list uses upper-alpha for styling. This CSS works fine in every browser except IE. The issue that I'm having is that in IE, after hovering over the div, it changes to 0. from A, B, C, etc..
Here's an example in jfiddle:
http://jsfiddle.net/YALdD/
if this works for you, just put the letters in the lists and get rid of the upper-alpha style, like this: http://jsfiddle.net/mjgasner/6J6Nf/3
Here's the workaround that is mentioned from the link in the comment above:
http://jsfiddle.net/mjgasner/94tu4/1/
It clearly doesn't work.
AND
IE won't render those as animations, as they are not supported.
http://www.w3schools.com/css3/css3_animations.asp
You can animate the color change in all browsers (even IE6!) with jQuery UI:
http://jqueryui.com/demos/animate/
Here is the link to W3Schools: http://www.w3schools.com/cssref/pr_list-style-type.asp
You can see all browsers supported for certain element.
If you need something else let us know.
What version of IE are you using?
I'm trying to get a few elements on my printing stylesheet to "show" at print/printpreview time and this isn't working. If I want to 'hide' elements, it works just fine.
I've tried setting the element's display=block from display=none and this isn't working. Also tried combinations thereof with using visibility=visible from visibility=hidden; no luck.
I thought I could work around this by doing some nasty hacking such as having my element at left= -3000px to left=20px; that change doesn't occur either at print time.
Another ugly hack of mine that isn't working is having the element's font color be the same as the background color in my main stylesheet, then changing it to black at print time; doesn't work either.
However, one thing that does consistently work is hiding any element at print time; so my print.css sheet does get picked up and applied.
In summary, so far, showing an element, changing its font color or position does not get picked up at print time; neither does centering an already visible element with text-align-center; by the way.
Also worth noting: The results are consistent in between IE9 and Chrome.
Any thoughts?
Check to see that any inline styles are not conflicting with your main css and your print styles.
An ugly workaround may be to add the !important tag to the print.css style.
Example:
.element {
display: block !important;
}