How to move the mouse in an element and disappear with another without js

Question

How to move the mouse in an element and disappear with another without js

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

On my site, I have a block div that slides when mouseover, but wherever it happens, there is the Facebook button that is in another area of the site. In no way do I get the div block to cover or override this button, so I thought I'd make it disappear when I hover the mouse in block div .

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

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

If it were possible, but I do not want to use JavaScript.

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

I was able to do something like what I want in jsfiddle link

css

asked by anonymous 21.04.2015 / 19:11

2 answers

Creating link from one site to another in cakephp Verify that the data entered by the user already exists in the database before inserting

score 1 · Answer 1

As you put your div structure, you can use adjacent selector to hide the element, eg:

#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.

score 0 · Answer 2

Live!

Whatever it is that 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>