How to hide a div from another div using CSS


Tags: html,css

Problem :

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/



Solution :

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;
  }

    CSS Howto..

    CSS - How to use by ID and by class

    Slideshow using background images with navigation and captions

    How to animate the movement of inline-block items on page resize (ideally using css)?

    CSS attribute selectors: how to escape newlines within attribute value?

    How to remove right border

    how to call css and js files in webview?

    How can I select the first paragraph in this code?

    How to switch left and right in a css file?

    How to make CSS Animation reverse on hover-out?

    How to use font-awesome from server

    How to style a form element when an input is focused?

    How to prevent an element to get pushed down by window resize?

    How do I justify a horizontal list?

    How can I fill the remaining space when dealing with an inline ul?

    jQuery slideshow image delay

    How can I apply CSS selector to attribute values being case sensitive?

    How can I position list in
    ?

    How to override facebook share button css

    How do I change the overflow of a single element, while having the overflow of the body hidden?

    CSS issue - How to Prevent Floating Objects from Wrapping in a Container, without changing size of container?

    How to style my HTML form using CSS

    How can I have a responsive height with absolutley position child elements

    How to create a card flip effect on DIV using javascript

    How to set css to a specific selector using jQuery

    How can i fill a paragraph (until end of line) with dashes using CSS

    how to create a QT plugin using Meego Touch Framework?

    CSS - How to add dot between navigation title

    how to add an overlaying color over an image with css

    How to center CSS Navigation Menu

    how to create an external javascript and an external css file for date picker and how to use it in eclipse