为什么在应用css之后jquery不起作用？

时间：2016-12-17 04:38:35

标签： javascript jquery html css

我有代码，当我点击锚标签然后myContent div显示和隐藏。

＆＃13;
＆＃13; 
      function toggleDiv(divId){
          $("#"+divId).toggle();
      }
＆＃13; 
   .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; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

但是当我在锚标签上给css时，show hide功能无法正常工作。下面是我的代码

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

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

3 个答案:

答案 0 :(得分：2)

这是因为z-index问题，你的锚标签位于切换div下面，这就是为什么你不能在显示切换时点击锚标记

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

.hr {
   z-index:99;
}

答案 1 :(得分：1)

将z-index添加到class="hr"

这是您的工作代码

＆＃13;
＆＃13; 
$(".hr").click(function (event){
  var divII = "#myContent";
          $(divII).toggle();
      });
＆＃13; 
.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;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

希望这有帮助！

相关问题
最新问题