CODEWITHSUNDEEP
csshtmlhoversiblings
mridul
mridul

Reputation: 2096

How to display and hide a div with CSS?

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

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

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

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

}
#s:hover ~ .ab,.a {
    display: none;
}
<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>

Here is my JSFiddle of my problem: JSFiddle Link

Upvotes: 73

Views: 447517

Answers (7)

marko988
marko988

Reputation: 33

I have a class that I want to hide, this is my code:

    /*--------------------------------------------------------------
    Title & Breadcrumb
--------------------------------------------------------------*/
.main-title-section-wrapper {
    clear: both;
    float: left;
    margin: 0;
    padding: 75px 0 90px;
    width: 100%;
}

#header-wrapper .main-title-section-wrapper {
    position: relative;
}

#header-wrapper.header-top-absolute .main-title-section-wrapper {
    position: static;
}


.main-title-section {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    pointer-events: none;
}



.main-title-section h1 {
    font-size: calc(var(--DTFontSize_H1)/.95);
    margin: 0 0 5px;
    word-break: break-all;
    font-weight: 700;
    text-transform: initial;
    line-height: 1.25em;
    color: #1a1a1a;
}



.breadcrumb {
    clear: both;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: 500;
}

.breadcrumb span:not(.current) {
    display: inline-block;
    margin: 0px 12px;
    padding: 0;
}

.main-title-section-wrapper .breadcrumb-default-delimiter:before {
    content: "";
    background-color: currentColor;
    display: inline-block;
    height: 14px;
    opacity: 0.45;
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 1px;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

.main-title-section h1,
.breadcrumb {
    hyphens: auto;
    word-break: break-word;
    word-wrap: break-word;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

.main-title-section-wrapper>.main-title-section-bg,
.main-title-section-wrapper>.main-title-section-bg:after {
    content: "";
    height: 100% !important;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}


/*--------------------------------------------------------------
    Default Colors
--------------------------------------------------------------*/

.breadcrumb {
    color: var(--DTBodyTxtColor);
}

.main-title-section h1 {
    color: var(--DTBlackColor);
}

.breadcrumb a {
    color: var(--DTLinkColor);
    border-bottom: 2px solid transparent;
}

.breadcrumb a:hover {
    border-bottom-color: var(--DTPrimaryColor);
}

.breadcrumb span.current {
    color: var(--DTBodyTxtColor);
}

.main-title-section-wrapper>.main-title-section-bg:after {
    background-color: rgba(var(--DTBlack_RGB), 0.05);
}

.main-title-section-wrapper.dark-bg-breadcrumb>.main-title-section-bg {
    background-color: var(--DTBlackColor);
}

.dark-bg-breadcrumb .main-title-section h1,
.dark-bg-breadcrumb .breadcrumb a,
.dark-bg-breadcrumb .breadcrumb span.current,
.dark-bg-breadcrumb .breadcrumb span:not(.current) {
    color: var(--DTWhiteColor);
}

.breadcrumb a:hover,
.dark-bg-breadcrumb .breadcrumb a:hover {
    color: var(--DTLinkHoverColor);
}



/*--------------------------------------------------------------
    Accents
--------------------------------------------------------------*/


/* Primary Color */

.breadcrumb a:hover {
    color: var(--DTPrimaryColor);
}


/*--------------------------------------------------------------
    Responsive
--------------------------------------------------------------*/

@media only screen and (min-width:1281px) {
    .main-title-section-wrapper {
        padding: 75px 0 90px;
    }
}

@media only screen and (max-width: 1280px) {
    .main-title-section-wrapper {
        padding: 45px 0 50px;
    }
}

/*----*****---- << Mobile (Landscape) >> ----*****----*/


/* Common Styles for the devices below 767px width */

@media only screen and (max-width: 767px) {
    .main-title-section h1 {
        font-size: 28px;
    }
    .main-title-section,
    .main-title-section h1,
    .breadcrumb {
        text-align: center;
    }
}


/* Common Styles for the devices below 479px width */

@media only screen and (max-width: 479px) {
    .main-title-section h1 {
        font-size: 24px;
    }
}

I'm trying to hide main title section wrapper, so far I used this:

    .main-title-section-wrapper {
    display: none ;
    visibility: hidden ;
    }
    
    .main-title-section-wrapper {
       position: absolute;
       top: -9999px;
       left: -9999px; }

And it works on chrome both on desktop that on mobile, but safari on ios still shows that class

What should I do to hide this element also in safari?

Upvotes: 0

Nguyen Anh Vu FPL DN
Nguyen Anh Vu FPL DN

Reputation: 1

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

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

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

}
#s:hover ~ .ab,.a {
    display: none;
}
<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>

Upvotes: 0

Pawan Kumar
Pawan Kumar

Reputation: 1

html code :

<button class="Show">Show</button> 
<button class="Hide">Hide</button>
<button class="toggle">Show &amp; Hide</button>
<div id="target"></div>

css code :

#target {
  background:#0099cc;
  width:300px;
  height:300px;
  height:160px;
  padding:5px;
  display:none;
}

.Hide
{
  display:none;
}

javascript code :

    $('.Show').click(function() {
    $('#target').show(200);
    $('.Show').hide(0);
    $('.Hide').show(0);
});
    $('.Hide').click(function() {
    $('#target').hide(500);
    $('.Show').show(0);
    $('.Hide').hide(0);
});
    $('.toggle').click(function() {
    $('#target').toggle('slow');
});

Upvotes: -1

Abhishek Mungekar
Abhishek Mungekar

Reputation: 17

Html Code :

    <a id="f">Show First content!</a>
    <br/>
    <a id="s">Show Second content!!</a>
    <div class="a">Default Content</div>
    <div class="ab hideDiv">First content</div>
    <div class="abc hideDiv">Second content</div>

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

Upvotes: 0

Aamer Shahzad
Aamer Shahzad

Reputation: 2947

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/

Upvotes: 19

multiplatform
multiplatform

Reputation: 923

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.

Upvotes: 76

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195952

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.

Upvotes: 49

Related Questions