Show div and hide another on hover with transition

Question

I have searched other questions but none are giving the result I am looking for.

I am trying to :hover in order to show another div and also hide another div at the same time. I can't wrap all divs in one parent div, because then the div I want to hide being :hover over will trigger the show/hide... and in addition do it with a nice transition.

Only when hovering over the 'hover me' text should the show/hide trigger.

The .remove_me class and text 'make me disappear' isn't disappearing on :hover. That is what I am unable to achieve.

Fiddle

CSS

.hover_me {
    cursor:pointer;
    -webkit-transition: .4s;
    transition: .4s;
    display:block;
    height:30px;
    background:#ccc;
    width:70px;
    line-height:30px;
    text-align:center;
}
.show_me {
    display:none;
}
.hover_me:hover + .remove_me {
    display:none;
}
.hover_me:hover + .show_me {
    display:block;
}
.remove_me {
    display:block;

HTML

<div class="hover_me">hover me</div>
<div class="show_me">show me</div>
<div class="remove_me">make me disappear</div>

This for example is not what I want to happen: http://jsfiddle.net/MBLZx/ the show/hide should only be triggered by the 'hover me' text

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

It should work as you want it to if you do it like this:

I changed your CSS code

.hover_me:hover + .remove_me {
    display:none;
}

To:

//Note the tilde
.hover_me:hover ~ .remove_me {
    display:none;
}

Explanation on the tilde

Hope this helps

edited May 23 '17 at 11:59

Community

1
1

answered Nov 17 '15 at 19:14

Mike Donkers

3,589
2
21
34

score 0 · Answer 2 · answered Nov 17 '15 at 19:16

I have changed your selector, and changed the display (that can not be animated) to opacity (that can)

.hover_me {
    cursor:pointer;
    -webkit-transition: .4s;
    transition: .4s;
    display:block;
    height:30px;
    background:red;
    width:70px;
    line-height:30px;
    text-align:center;
}
.show_me {
    opacity: 0;
}
.hover_me:hover ~ .remove_me {
    opacity: 0;
}
.hover_me:hover + .show_me {
    opacity: 1;
}
.remove_me {
    margin-top: -1em;
    opacity: 1;
}

div {
    transition: opacity 1s;
}

<div class="hover_me">hover me</div>
<div class="show_me">show me</div>
<div class="remove_me">make me disappear</div>

score 0 · Answer 3 · answered Nov 17 '15 at 19:21

Actually to select the remove_me you have to apply the one more + as show_me lies in between. + select the next tag class. so we have to put the + .show_me on between

.hover_me:hover + .show_me + .remove_me {
    display:none;
}

check the fiddle http://jsfiddle.net/stdeepak22/enmxx59b/

score 0 · Answer 4 · answered Nov 17 '15 at 19:35

You need to ...

use the general adjacent selector ~ and not the direct adjacent selector + to make .remove_me "disappear"
use opacity or any other property that you can use with transition (not display) to create a show/hide effect

Change your CSS as follows:

.hover_me:hover ~ .remove_me{
    display:none;
}

Demo fiddle here

.hover_me {
    cursor:pointer;
    -webkit-transition: .4s;
    transition: .4s;
    display:block;
    height:30px;
    background:red;
    width:70px;
    line-height:30px;
    text-align:center;
}
.show_me {
    opacity: 0;
}
.hover_me:hover ~ .remove_me {
    opacity: 0;
}
.hover_me:hover ~ .show_me {
    opacity: 1;
}
.remove_me {
    opacity: 1;
}
.toggled{
    position: absolute;
    transition: opacity 300ms;
}

<div class="hover_me">hover me</div>
<div class="toggled show_me">show me</div>
<div class="toggled remove_me">make me disappear</div>

Show div and hide another on hover with transition

4 Answers4