Transition with hidden elements

Question

I have a text which on hover displays another (otherwise hidden) text elsewhere, like this:

HTML

<div class="design">hover me<span>to show this</span></div>

CSS

.design {
    position: absolute;
    z-index: 2;
    color: #404040;
}

.design:hover {
    cursor: pointer;
}

.design span {
    position: absolute;
    display: none;
}

.design:hover span {
    display: block;
    top: 47px;
    left: 45px;
    font-family: Arial;
    font-size: 13px;
    color: #000;
}

How can apply transition effects to the text which is hidden or shown depending on the hover? Apparently transition conflicts with display:none and :block, but using visibility doesn't seem to work either.

edit: jsFiddle - http://jsfiddle.net/vwsgJ/

This question is very similar to http://stackoverflow.com/questions/17200141/animating-an-element-when-hovering-on-two-other-element-using-css.. Hope this will help you... — It worked yesterday., Jun 22 '13 at 12:08
And you can create a jsfiddle for your question http://jsfiddle.net/. This will help others to give you a better answer:) — It worked yesterday., Jun 22 '13 at 12:12
Added the jsFiddle, thanks. However I can't figure out help from the other topic you linked. — lapingultah, Jun 22 '13 at 12:19
hope this will help too.i created this using rgba -->http://jsfiddle.net/vwsgJ/1/ — It worked yesterday., Jun 22 '13 at 12:43
Thanks, but same issue as below; hovering the hidden text causes it to show. — lapingultah, Jun 22 '13 at 13:15
Use `opacity = 0` and `1`, `transition` only works on numeric values! — Jonathan, Jun 22 '13 at 13:32

score 2 · Accepted Answer · edited May 23 '17 at 12:05

2

First method

I have managed to achieve what you wanted using opacity, according to (I think) MDN (Mozilla Developer Network) you can't transition display. I also rearranged your css slightly:

http://codepen.io/hwg/pen/xFDIl - Working Code.

CSS:

.design span {
position: absolute;
opacity:0;
transition: opacity 1s;

display: block;
top: 47px;
left: 45px;
font-family: Arial;
font-size: 13px;
color: #000;

width:0;
height:0;
margin-left:-1000px;

}

.design:hover span {

opacity:1;
/*transition: all 1s;*/

width:30px;
height:auto;
margin-left:0;
}

Note that codepen.io uses prefix-free, see http://caniuse.com/css-transitions for browser support, prefixes may have to be added.

Edit- to avoid the OP's problem below, add: width:0; height:0; to the un-hovered element, and a pixel width/height such as width:30px; height:auto; on hover. (See example) There is if you hover over precisely that area you see the hover effect, but in practice this would be very rare in my view, also this can be solved by the use of margin left if needed.

Note: this stops the transition on mouse out.

New Method

To avoid the problem mentioned above, the property pointer-events:none can be added to the span. This removes the need to have any negative margins, or custom widths or heights.

See http://codepen.io/hwg/pen/BojpK

However, this is not supported in IE-anything, see css 'pointer-events' property alternative for IE for maybe more help.

Otherwise I don't think the OP's aim can be completely met.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 22 '13 at 12:28

harley_woop

1,739
4
15
28

Thanks, that _almost_ solves the problem, but as you can see, hovering the hidden "to show this" text (if/when you know its position) also causes it to show. That's also why I went with `display` in the first place. Any way around this? – lapingultah Jun 22 '13 at 12:36
@lapingultah Fixed using `width`- see answer – harley_woop Jun 22 '13 at 12:39
@lapingultah Also, `height`. – harley_woop Jun 22 '13 at 12:46
Doesn't seem to work, repeatable with CodePen and jsFiddle. Shouldn't be a browser issue (FF 21.0). – lapingultah Jun 22 '13 at 12:48
Actually acting even more strange that way, http://jsfiddle.net/STYJg/. Sufficient to hover anywhere within the text area. – lapingultah Jun 22 '13 at 12:51
@lapingultah That's because you declared `width` twice. – harley_woop Jun 22 '13 at 12:52
That circumvents the issue, but kills fade-out transition as well. – lapingultah Jun 22 '13 at 12:59

Transition with hidden elements

1 Answers1

First method

New Method