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

    Want to override Bootstrap, but how to avoid the use of !important?

    How to remove extra space under paragraph in HTML/CSS

    How do I get a computed style?

    How to align elements equally in a line in CSS/Bootstrap?

    How can i get my slideshow to stop changing size?

    How to change font color of select2 control using css

    How to make css-menu independent of the number of menu items?

    How to customize Subscribe2 button appearance in WordPress?

    How to change the font family of Highchart to Bootstrap css default font family

    How to change scrollbar in textarea input?

    How to change width of

    How to blink a text on button in IE ,chrome etc using JQuery or CSS

    How do i shift the text in twitter bootstrap navbar to center?

    How to exclude leading hyphens from justification in dialogue lines using CSS + HTML?

    How to change a div's position according to data from database

    CSS how to change color of a specific primary-panel in a if-block

    Bootstrap CSS - How do I keep the search form inline with other navbar elements?

    how to get background image present in other folder with css?

    How to change MenuItem focus/hover color

    How to add Indian rupee symbol to the RadioButtonList control in asp.net using CSS design

    Django - how to collapse forms like in the django admin

    How to add and remove background images in css on clicking a link on page

    How do I position text within a box with css?

    How to override default CSS file location in a Qml Webview?

    How to access lower children using > operator?

    How can a div be aligned center using jquery [closed]

    How to assign color obtained by CSS gradient generator

    how to make divs adjust to dynamic screen resolutions?

    How to filter elements on click in js?

    How do I select text after a

    tag, but before a nested tag?