How to display and hide a div with CSS

Question

In my script there are three divs  I want to display div with class  ab  when I hover on first line and display div with class  abc   when hover on second line  Otherwise I want to display div with class  a  by default   But it never displays the div with class  a     x000D   x000D   abc  ab   x000D      display  none  x000D    x000D   f hover    ab   x000D      display  block  x000D   x000D    x000D   f hover    abc  a   x000D      display  none  x000D   x000D    x000D   s hover    abc   x000D      display  block  x000D   x000D    x000D   s hover    ab  a   x000D      display  none  x000D    x000D   lt a id  f  gt Show First content  lt  a gt  x000D   lt br  gt  x000D   lt a id  s  gt Show Second content   lt  a gt  x000D   lt div class  a  gt Default Content lt  div gt  x000D   lt div class  ab  gt First content lt  div gt  x000D   lt div class  abc  gt Second content lt  div gt  x000D   x000D   x000D    Here is my JSFiddle of my problem  JSFiddle Link

User · Accepted Answer

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

User · Answer

Html Code         lt a id  f  gt Show First content  lt  a gt       lt br  gt       lt a id  s  gt Show Second content   lt  a gt       lt div class  a  gt Default Content lt  div gt       lt div class  ab hideDiv  gt First content lt  div gt       lt div class  abc hideDiv  gt Second content lt  div gt    Script code     document  ready function             f   mouseover function                a  abc   addClass  hideDiv                ab   removeClass  hideDiv           mouseout function                 a   removeClass  hideDiv                ab  abc   addClass  hideDiv                     s   mouseover function                a  ab   addClass  hideDiv                abc   removeClass  hideDiv           mouseout function                 a   removeClass  hideDiv                ab  abc   addClass  hideDiv                  css code    hideDiv       display none

User · Answer

To hide an element  use   display  none  visibility  hidden    To show an element  use   display  block  visibility  visible    The difference is    Visibility handles the visibility of the tag  the display handles space it occupies on the page   If you set the visibility and do not change the display  even if the tags are not seen  it still occupies space

User · Answer

you can use any of the following five ways to hide element  depends upon your requirements   Opacity   hide     opacity  0      Visibility   hide      visibility  hidden      Display   hide      display  none      Position   hide      position  absolute     top  -9999px     left  -9999px      clip-path   hide     clip-path  polygon 0px 0px 0px 0px 0px 0px 0px 0px       To show use any of the following   opacity  1  visibility  visible  display  block   Source   https   www sitepoint com five-ways-to-hide-elements-in-css

[css] How to display and hide a div with CSS?

Examples related to css

Examples related to html

Examples related to hover

Examples related to siblings