为什么在应用CSS jQuery后不起作用？

Question

我有代码，当我单击锚标记时，将显示和隐藏myContent div。

  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> 

但是当我在锚标记上给css时，显示隐藏功能无法正常工作。下面是我的代码

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

休息都是一样的。 它既没有显示也没有错误。

Answer 1

那是因为z-index问题，您的锚标签位于切换div下方，这就是为什么在显示切换时无法单击锚标签的原因

将z-index to .hr设置z-index to .hr这将解决您的问题

.hr {
   z-index:99;
}

Answer 2

向您添加z-index class="hr"

这是您的工作代码

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

将z-index: 1应用于.hr ，例如：

.hr {
  z-index: 1;
}

看看下面的工作片段：

 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> 

希望这可以帮助！