How to mouse one element and disappear with another without js

Question

On my website, I have a block div that slides when passing the mouse, but where it passes there is the Facebook like button that is in another area of the site. No way I get that block div cover or overlay this button, so I thought I’d make it disappear when I hover the mouse on the block div.

As if I put each one in a block and did:

#sliding_block:hover #facebook_block {
    display: none;
}

If possible, but I don’t want to use Javascript.

Any solution? Or would have some way to cover the Facebook button?

I managed to do something similar to what I want in jsfiddle http://jsfiddle.net/sr37nard/

Answer 1

The way you put your div, you can use adjacent selector to hide the widget, example:

#sliding_block{
    width:100px;
    height:100px;
    background-color:red;
    float:left;
    cursor:pointer;
}
#facebook_block{
    width:100px;
    height:100px;
    background-color:blue;
    float:left;
}
#sliding_block:hover + #facebook_block {
    display: none;
}

<div id="sliding_block">
    Passe o mouse
</div>
<div id="facebook_block">
    <img style="margin: 15px 0 0 15px" width="50px" height="50px" src="http://www.gamers4fun.nl/uploads/monthly_08_2014/post-5-0-42159100-1409472635.png"/>
</div>

OBS: I just added float:left to position them side by side.

Answer 2

Long live!

Weight that this is what you want.

#a {
    position: absolute;
    background-color: red;
    width: 100px;
    height: 100px;
    
    -webkit-transition: 0.5s;
            transition: 0.5s;
    
    opacity: 1;
    filter: alpha(opacity=100);
}

#a:hover {
    opacity: 0;
    filter: alpha(opacity=0);
}

#b {
    background-color: blue;
    width: 100px;
    height: 100px;
}

<div id="a">
    passe o mouse
</div>
<div id="b">
    <img style="margin: 15px 0 0 15px" width="50px" height="50px" src="http://www.gamers4fun.nl/uploads/monthly_08_2014/post-5-0-42159100-1409472635.png" />
</div>