3

I want to hide a div con1 when i hover div con2 and vice versa. I am able to hide con2 when i hover con1 but can't do the same vice-versa. Why it is not working when i hover con2 to hide con1. Below are the codes:

<html>
  <head>
    <title>Home</title>
    <style type="text/css">
      #con1{
        float: left;
        width: 500px;
        height: 300px;
        background: #f00;
      }

      #con2{
        float:left;
        width: 500px;
        height: 300px;
        background: #808;
      }

      #con1:hover ~#con2{
        visibility:hidden;
      }

      #con2:hover ~#con1{
        display:none;
      }

    </style>
  </head>
  <body>

    <div id="con1">
    </div>
    <div id="con2">
    </div>

  </body>
</html>

Example: http://jsfiddle.net/mendesjuan/s8bbe/

Laishram Pilot
  • 137
  • 1
  • 3
  • 10

7 Answers7

2

I believe this is not possible with the general sibling selector as it only applies to elements after it in the html-structure. See more: http://css-tricks.com/child-and-sibling-selectors/

A possible (althought not especially elegant solution): http://jsfiddle.net/s8bbe/4/

<div id="wrapper">
<div id="con1">
</div>
<div id="con2">
</div>


  #con1{
    float: left;
    width: 500px;
    height: 300px;
    background: #f00;
  }

  #con2{
    float:left;
    width: 500px;
    height: 300px;
    background: #808;
  }

  #con1:hover ~#con2{
    visibility:hidden;
  }

  #wrapper:hover #con1:not(:hover){
    visibility:hidden;
  }
KnutSv
  • 748
  • 5
  • 9
1

Putting the divs in one container div you can hide all contained divs on hoover, but not the actually 'hovered over' one with:

        div:hover div {
            visibility: hidden;
        }

        div:hover div:hover {
            visibility: visible;
        }

See demo: http://jsfiddle.net/TcPJZ/3/

EDIT: It actually works well for arbitrary number of divs (see demo).

fast
  • 885
  • 7
  • 15
1

Example: http://jsfiddle.net/s8bbe/5/

@KnutSv's solution is great. Here's an add-on if using more than 2 divs.

<div id="con-wrapper">  
    <div id="con1">
    </div>
    <div id="con2">
    </div>
    <div id="con3">
    </div>    
</div>

And a one-line css with :hover, :not(:hover).

  #con1{
    float: left;
    width: 500px;
    height: 300px;
    background: #f00;
  }

  #con2{
    float:left;
    width: 500px;
    height: 300px;
    background: #808;
  }

  #con3{
    float:left;
    width: 500px;
    height: 300px;
    background: #606;
  }

  #con-wrapper:hover > div:not(:hover) {
     visibility: hidden;
  }

Using "> div" will target all #con-wrapper direct div children, which are not hovered, and hide them.

Use #con-wrapper:hover > div[id^=con]:not(:hover) if only cons needed to be targeted.

JungleZombie
  • 1,181
  • 11
  • 11
0

Maybe you are using wrong selectors

try this 

.con2:hover ~ div {display:none}

But this is "Hard code" if you will want to add more divs before con-2 they will be dissappearing too

AlexTroy
  • 395
  • 2
  • 9
  • I thought this would work too, but it doesn't. You should try it before you answer a question. http://jsfiddle.net/mendesjuan/s8bbe/3/ – Ruan Mendes Jun 06 '14 at 11:50
0

I try it on jsfiddle and I get the problem.

When you have this: 

<div id="con1">
</div>
<div id="con2">
</div>

Hover on "con1" works, but when you change the positions: 

<div id="con2">
</div>
<div id="con1">
</div>

Now it's "con2" which is working and now not "con1".

So , I don't know how to fix it, but I can tell you about make it by Javascript/Jquery.

I think that can be solve the problem.

Caba
  • 41
  • 3
0

it will be easily done by using below code using jquery , why you depend only on css

$("#con1").hover(function(){
  $("#con2").css("visibility","hidden");

  },function(){
  $("#con2").css("visibility","visible");
});

here is the working sample http://jsfiddle.net/5jRXm/

Arun_SE
  • 230
  • 1
  • 13
  • As much as this does work, the question clearly asks for a CSS solution and did not mention jQuery. The correct answer would be: No, you can't, with an explanation – Ruan Mendes Jun 06 '14 at 11:52
  • @JuanMendes that dependents of the perpective OP – codefreaK Jun 06 '14 at 11:54
  • @Arun_SE Didn't see any words? The title of the question is "How to hide a div from another div using CSS" – Ruan Mendes Jun 06 '14 at 12:31
  • i didnt see any words like i want only on css.. they have to know solutions,didnt want to stick around – – Arun_SE Jun 06 '14 at 12:33
  • i know it could be done using JavaScript. Only that I wanted to do using only CSS. Anyways I am happy for your answer too @Arun_SE – Laishram Pilot Jun 08 '14 at 04:23
0

CSS doesn't support previous sibling selection. If you still want to have a previous sibling selector then you should look in to javascript.

var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');


function displayElem(el, property, value){
    el.style[property] = value;
}

con1.onmouseover = displayElem.bind(null, con2, 'display', "none");
con1.onmouseout = displayElem.bind(null, con2, 'display', "");
con2.onmouseover = displayElem.bind(null, con1, 'visibility', "hidden");
con2.onmouseout = displayElem.bind(null, con1, 'visibility', "");

Working Fiddle

In the above fiddle, I even moved the next sibling selection to javascript so that to let you keep the code structured. if you don't want to do so, then happily don't events to the first element :)

Mr_Green
  • 40,727
  • 45
  • 159
  • 271