I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I was going for a tooltip effect that when you hover a link, the tooltip appears, but fades in using only CSS3.
I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's initally positioned left:-999px;.
So basically, what am I doing wrong/is what I was going for possible? (Note I don't want to do anything with JS/JQuery, was just curious to see if I could do it in CSS)
You can see and play with it here.
You need to set the tool tip to not even be shown normally.
#one a.tooltip span {
//display:block;
display:none;
....
}
Edit: It seem that rather then set display to none, just position to absolute.
Edit2: it seems I was beaten to it.
Your span is still in the document flow.
You can remove it by setting its display to none, as the comment above suggests, or setting its position to absolute, which seems to be what you were getting at to hide it off the left edge of the screen.
Related
I have a user interface situation that i recreated in this jsFiddle. Please have a look.
Basically, the box element should always overlap all others when it is visible (when its parent field is in state :hover. This seems to work fine, visually - but try to move your mouse over the box element while it is still in transition. You will notice that the :hover on the parent element becomes obsolete, causing the box to close again.
However, if you wait a few moments longer before you move the mouse downwards (shortly before the transition ends or once it is done), you will see that the box remains open.
I did tests modifying z-index, even trying to make z-index part of the transition, but to no avail. The problem persists.
Why is this happening?
And how can i modify the CSS definitions in a way that box will open on :hover over field using the given CSS transition fluid and yet being fully accessible (frontmost) from the very first moment the transition starts?
Notes:
I only need this to work in Chrome exclusively.
In my live environment i use a much faster transition, but i made it much longer in this example, because it is easier to test.
I solved this issue by applying a declining z-index on each of the field elements, but i don't like this approach at all because it is a workaround, not a solution.
Give the parent .field:hover { z-index:1; } and change .field > .box { position: absolute; ... } to .field > .box { position: relative; ... }. This is to not remove the boxes from the flow of the page and to allow each field to be placed over the others when hovered
Demo
Check this out:
http://codepen.io/maxwbailey/pen/vGKBr
Now, they look fine when you aren't hovering over them, but when you hover over the <button> and <input> elements, you'll see that the text below them is bumped around a bit, while hovering over the <a> element does not cause the same effect. That's because the <button> and <input> elements are displaying as inline-blocks still (which handle borders, padding, and margins differently than regular inlines), despite the display: inline !important; line that is applied to them.
Is there anyway to override this? I know it's doable via hacks like borders with the same colour as the background, etc. but I'd really like to know if there's a way to make them display: inline properly.
Note: The problem here isn't about the text being bumped around (though that is an effect of it), it's that, despite everything saying otherwise, the browser is still forcing the button to display as an inline-block. Thanks to everyone who's provided methods to prevent the text bumping from happening, but that's not the real problem here.
Thanks!
Not sure the context of why your markup exists like this, but the issue looks like it's being triggered by setting the font-family. If you take a look at this pen - http://codepen.io/pnts/pen/Egwuo - the hover works fine without a font-family specified, but if you uncomment the line specifying one, the jumping begins.
It seems your question is a little misleading. Your button tag IS in fact set to display:inline on both normal and hover states. It sounds like the question you have is how to prevent the text below from getting bumped down on rollover. Instead of using a bottom border as you are currently, why not use the following in the hover state to achieve the underline?
text-decoration:underline;
agree with the previous answer, however if you want the flexibility of a border, being able to use padding to adjust where it lays etc, you could use
border:1px solid transparent;
not as hacky as using the same color as you bg because it doesn't matter the color of the background that way.
We have a project page here to check the issue live -> http://hdev.hattrick12.com/
Hovering the Post Elements causes the post height to jump in IE9/Standard for a split second.
It has something to do with .post footer li being display inline - but I need to have the elements either floating or display inline which both seems to cause trouble in IE9.
Can someone point me in the right direction as I can't find anything written on that specific IE Bug?
I found it! It's the min-height of the elements that causes them to switch height for a split second when hovered.
Thx to everyone contributing
I am struggling trying to figure this one out. I have an article that has two elements being inserted :before and :after it that are both being positioned absolutely within that article.
In all browsers except IE8 the z-index stacking is working perfectly. It should go in this order from bottom to top:
Article Content > Fade Out Image > Icon
I have already tried a few different things, the latest of which can be seen here: http://jsfiddle.net/LtYMV/2/
A basic run down of what I'm trying looks like this:
article {
// styles
}
article:before {
// icon background image used on inserted content
}
article:after {
// background image used on inserted content
}
I know there is some sort of trick to this I just can't seem to figure it out with any combination of z-index values. Help appreciated!
IE8 is weird when it comes to pseudo elements and z-index. There's a bug that make child elements kind of inherit (without being able to overwrite) the parents' z-index. You can read more about IE8 and z-index on quirksmode.
I changed your fiddle a bit to work the same way as your example in standards compliant browsers and to work alright in IE8, but without the fade in IE: http://jsfiddle.net/LtYMV/8/, although with the icon under the text.
I also created a version where it's using another element for the icon (with the class "icon", just after each ".post" element). It still hasn't got the fade for IE8, but the icon is over the text: http://jsfiddle.net/LtYMV/7/, so it's a slight improvement from the previous one.
Hope this helps!
I have a couple links on this page (http://tuscaroratackle.com) that are ending up at unexpected positions in their :active state. The links are absolutely positioned, so I'm guessing the issue is partly due to that. But I can't figure out what rules are getting applied on :active to make them shift down and to the left so far. I do have one rule that makes them "depress" a bit on active ( a:active {position:relative; top:1px;} ) but can't quite figure out why they are shifting so badly.
The links in question are these:
it's the "See Rods" link that appears on hover. If you click you'll see the awkward resulting positioning.
Also for those that don't know (I recently found out) you can inspect the :active state in firefug. Just use the drop down arrow on the style tab to toggle those styles on.
From description of position:absolute:
Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static.
And, as you noted, you have position:relative; defined for a:active. Now, therefore, in <a><span></span></a> combination position of span is counted relative to position of a, not to position of .hp-promo-item.
As for solution, if you need to move a down 1 pixel on :active, maybe margin-top will work better. But wait, you already have margin-top:1px for .promo-content .icon. Well, maybe margin-top:2px !important; then. I don't really understand the aim to suggest more.
PS Thanks for telling about :active helper in firebug, pretty useful!