Why after applying css jquery doesn't work?

Question

I have code which when I click on anchor tag then myContent div show and hide.

  function toggleDiv(divId){ $("#"+divId).toggle(); } 

  .circle-container { position: relative; width: 24em; height: 24em; padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/ border: dashed 1px; border-radius: 50%; margin: 1.75em auto 0; } .circle-container a { overflow: hidden; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; /* 2em = 4em/2 */ /* half the width */ } .circle-container img { display: block; width: 100%; } .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */ .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); } .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); } .deg180 { transform: translate(-12em); } .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); } .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); } .deg300{ transform: rotate(280deg) translate(12em) rotate(-280deg); } /* this is just for showing the angle on hover */ .circle-container a:not(.center):before { position: absolute; width: 4em; color: white; opacity: 0; background: rgba(0,0,0,.5); font: 1.25em/3.45 Courier, monospace; letter-spacing: 2px; text-decoration: none; text-indent: -2em; text-shadow: 0 0 .1em deeppink; transition: .7s; /* only works in Firefox */ content: attr(class)'°'; } .circle-container a:hover:before { opacity: 1; } /* this is for showing the circle on which the images are placed */ .circle-container:after { position: absolute; top: 2.8em; left: 2.8em; width: 24em; height: 24em; border: dashed 1px deeppink; border-radius: 50%; opacity: .3; pointer-events: none; content: ''; } .circle-container:hover:after{ opacity: 1; } .circle-container a:not(.center):after{ position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; box-shadow: 0 0 .5em .5em white; margin: -2px; background: deeppink; opacity: .3; content: ''; } .circle-container:hover a:after { opacity: 1; } .circle-container a:hover:after { opacity: .3; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="javascript:toggleDiv('myContent');">+</a> <div id="myContent" class='circle-container' style="display:none"> <a href='#' class='center'><img src=''></a> <a href='#' class='deg0'><img src=''></a> <a href='#' class='deg45'><img src=''></a> <a href='#' class='deg135'><img src=''></a> <a href='#' class='deg180'><img src=''></a> <a href='#' class='deg225'><img src=''></a> <a href='#' class='deg315'><img src=''></a> <a href='#' class='deg300'><img src=''></a> </div> 

But when i give css on anchor tag then show hide functionality doesn't work properly.Below is my code

.hr{

      display: block;
      width: 74px;
      height: 34px;
      margin: 40px 0px 0px 0px;
      background: #3e599a;
      text-decoration: none;
      width: 110px;
      font: 15px/46px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
      color: #FFFFFF;
      position: relative;
      position:fixed;
      top: 40%;
      left: 50%;

  }

<a class="hr" href="javascript:toggleDiv('myContent');">+</a>

Rest is all the same . Neither it is showing and error.

Answer 1

That is because of the z-index problem, your anchor tag below the toggle div, thats why you cant click the anchor tag when the toggle is displayed

set z-index to .hr This will fix your problem

.hr {
   z-index:99;
}

Answer 2

Add z-index to you class="hr"

Here is your working code

 $(".hr").click(function (event){ var divII = "#myContent"; $(divII).toggle(); }); 

 .circle-container { position: relative; width: 24em; height: 24em; padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/ border: dashed 1px; border-radius: 50%; margin: 1.75em auto 0; } .circle-container a { overflow: hidden; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; /* 2em = 4em/2 */ /* half the width */ } .circle-container img { display: block; width: 100%; } .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */ .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); } .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); } .deg180 { transform: translate(-12em); } .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); } .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); } .deg300{ transform: rotate(280deg) translate(12em) rotate(-280deg); } /* this is just for showing the angle on hover */ .circle-container a:not(.center):before { position: absolute; width: 4em; color: white; opacity: 0; background: rgba(0,0,0,.5); font: 1.25em/3.45 Courier, monospace; letter-spacing: 2px; text-decoration: none; text-indent: -2em; text-shadow: 0 0 .1em deeppink; transition: .7s; /* only works in Firefox */ content: attr(class)'°'; } .circle-container a:hover:before { opacity: 1; } /* this is for showing the circle on which the images are placed */ .circle-container:after { position: absolute; top: 2.8em; left: 2.8em; width: 24em; height: 24em; border: dashed 1px deeppink; border-radius: 50%; opacity: .3; pointer-events: none; content: ''; } .circle-container:hover:after{ opacity: 1; } .circle-container a:not(.center):after{ position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; box-shadow: 0 0 .5em .5em white; margin: -2px; background: deeppink; opacity: .3; content: ''; } .circle-container:hover a:after { opacity: 1; } .circle-container a:hover:after { opacity: .3; } .hr{ display: block; width: 74px; height: 34px; margin: 40px 0px 0px 0px; background: #3e599a; text-decoration: none; width: 110px; font: 15px/46px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; color: #FFFFFF; position: relative; position:fixed; top: 40%; left: 50%; z-index:10; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="hr" href="javascript:toggleDiv('myContent');">+</a> <div id="myContent" class='circle-container' style="display:none"> <a href='#' class='center'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a> <a href='#' class='deg0'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a> <a href='#' class='deg45'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a> <a href='#' class='deg135'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a> <a href='#' class='deg180'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a> <a href='#' class='deg225'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a> <a href='#' class='deg315'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a> <a href='#' class='deg300'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a> </div> 

Answer 3

Apply z-index: 1 to .hr , like:

.hr {
  z-index: 1;
}

Have a look at the working snippet below:

 function toggleDiv(divId){ $("#"+divId).toggle(); } 

 .circle-container { position: relative; width: 24em; height: 24em; padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/ border: dashed 1px; border-radius: 50%; margin: 1.75em auto 0; } .circle-container a { overflow: hidden; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; /* 2em = 4em/2 */ /* half the width */ } .circle-container img { display: block; width: 100%; } .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */ .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); } .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); } .deg180 { transform: translate(-12em); } .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); } .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); } .deg300{ transform: rotate(280deg) translate(12em) rotate(-280deg); } /* this is just for showing the angle on hover */ .circle-container a:not(.center):before { position: absolute; width: 4em; color: white; opacity: 0; background: rgba(0,0,0,.5); font: 1.25em/3.45 Courier, monospace; letter-spacing: 2px; text-decoration: none; text-indent: -2em; text-shadow: 0 0 .1em deeppink; transition: .7s; /* only works in Firefox */ content: attr(class)'°'; } .circle-container a:hover:before { opacity: 1; } /* this is for showing the circle on which the images are placed */ .circle-container:after { position: absolute; top: 2.8em; left: 2.8em; width: 24em; height: 24em; border: dashed 1px deeppink; border-radius: 50%; opacity: .3; pointer-events: none; content: ''; } .circle-container:hover:after{ opacity: 1; } .circle-container a:not(.center):after{ position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; box-shadow: 0 0 .5em .5em white; margin: -2px; background: deeppink; opacity: .3; content: ''; } .circle-container:hover a:after { opacity: 1; } .circle-container a:hover:after { opacity: .3; } .hr { z-index: 1; display: block; width: 74px; height: 34px; margin: 40px 0px 0px 0px; background: #3e599a; text-decoration: none; width: 110px; font: 15px/46px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; color: #FFFFFF; position: relative; position:fixed; top: 40%; left: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="hr" href="javascript:toggleDiv('myContent');">+</a> <div id="myContent" class='circle-container' style="display:none"> <a href='#' class='center'><img src='http://placehold.it/100x100'></a> <a href='#' class='deg0'><img src='http://placehold.it/100x100'></a> <a href='#' class='deg45'><img src='http://placehold.it/100x100'></a> <a href='#' class='deg135'><img src='http://placehold.it/100x100'></a> <a href='#' class='deg180'><img src='http://placehold.it/100x100'></a> <a href='#' class='deg225'><img src='http://placehold.it/100x100'></a> <a href='#' class='deg315'><img src='http://placehold.it/100x100'></a> <a href='#' class='deg300'><img src='http://placehold.it/100x100'></a> </div> 

Hope this helps!