How to Display and Hide a Div with CSS

How to display and hide a div with CSS?

You need

.abc,.ab {
    display: none;
}

#f:hover ~ .ab {
    display: block;
}

#s:hover ~ .abc {
    display: block;
}

#s:hover ~ .a,
#f:hover ~ .a{
    display: none;
}

Updated demo at http://jsfiddle.net/gaby/n5fzB/2/

The problem in your original CSS was that the , in css selectors starts a completely new selector. it is not combined.. so #f:hover ~ .abc,.a means #f:hover ~ .abc and .a. You set that to display:none so it was always set to be hidden for all .a elements.

Hide Show content-list with only CSS, no javascript used

I wouldn't use checkboxes, i'd use the code you already have

DEMO http://jsfiddle.net/6W7XD/1/

CSS

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}

HTML

<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>

This way the text is only hidden on click of the hide element

Hide A Div With CSS Only

when the button is inside the div that needs to hide.

~~Short answer: No, you can't achieve this when the button is inside the element.~~ ^{Thanks Joseph Marikle}

~~However, you can achieve this when the button is outside the div.~~

#hide {  display: none;}label {  cursor: pointer;  text-decoration: underline;}#hide:checked ~ #randomDiv {  display: none;}

<input type="checkbox" id="hide" />

<div id="randomDiv">  This is a div  <label for="hide">Hide div</label></div>

HTML - Hide and unhide div by display none

Because first time, x.style.display is not defined!

Modify your condition to if (x.style.display === "none" || !x.style.display)

<!DOCTYPE html><html>
<head>  <meta name="viewport" content="width=device-width, initial-scale=1">  <style>    #myDIV {      width: 100%;      padding: 50px 0;      text-align: center;      background-color: lightblue;      margin-top: 20px;      display: none;    }  </style></head>
<body>
  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
  <button onclick="myFunction()">Try it</button>
  <div id="myDIV">    This is my DIV element.  </div>
  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
  <script>    function myFunction() {      var x = document.getElementById("myDIV");      if (x.style.display === "none" || !x.style.display) {        x.style.display = "block";      } else {        x.style.display = "none";      }    }  </script>
</body>
</html>

how to hide the content of the div in css

Without changing the markup or using JavaScript, you'd pretty much have to alter the text color as knut mentions, or set text-indent: -1000em;

IE6 will not read the :hover selector on anything other than an anchor element, so you will have to use something like Dean Edwards' IE7.

Really though, you're better off putting the text in some kind of element (like p or span or a) and setting that to display: none; on hover.

Show/Hide a div according to screen size HTML/CSS

If you want to hide this div in all the devices that have a max-width of 768px, just use this,

@media (max-width: 768px){
  .side-menu {
    display: none;
  }
}

How to hide a div on certain pages using CSS

you can use style as a property of a div

<div class="example div" style="visibility:hidden;">

this will require to create a new layout .

or you can just use this js code in the login page

document.getElementById('hdiv').style.visibility="hidden";

and just add an id for the div. or you might use getElementsByClassName.

How to Display and Hide a Div with CSS