Question

有人可以帮助我让这个圆圈作为按钮工作（整个圆圈可点击甚至不是中心）

提前谢谢你：（如上所述＆gt;＆gt;现在它只是可点击的中心而不是整个圆圈，非常感谢大家：）

＆＃13;

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>


  <style>
    div#timeline {
      background-color: #6ab0de;
      margin-top: 150px;
      height: 10px;
      width: 100%;
      position: relative;
    }
    div#timeline .inside {
      position: absolute;
      height: 4px;
      background-color: #fff;
      width: 0%;
      top: 3px;
      left: 0;
    }
    div#timeline .dot {
      z-index: 99;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: absolute;
      top: -15px;
      text-align: center;
      cursor: pointer;
    }
    div#timeline .dot:nth-child(1) {
      left: 10%;
    }
    div#timeline .dot:nth-child(2) {
      left: 20%;
      background-color: #e74c3c;
    }
    div#timeline .dot:nth-child(3) {
      left: 30%;
      background-color: #7b3;
    }
    div#timeline .dot:nth-child(4) {
      left: 40%;
      background-color: #20638f;
    }
    div#timeline .dot:nth-child(5) {
      left: 50%;
      background-color: #7cdbd5;
    }
    div#timeline .dot:nth-child(6) {
      left: 60%;
      background-color: #f39c12;
    }
    div#timeline .dot:nth-child(7) {
      left: 70%;
      background-color: #2c3e50;
    }
    div#timeline .dot:nth-child(8) {
      left: 80%;
      background-color: #e74c3c;
    }
    div#timeline .dot:nth-child(9) {
      left: 90%;
      background-color: #7b3;
    }
    div#timeline .dot:hover {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
    div#timeline .dot date {
      font-family: roboto;
      font-size: 1.1rem;
      display: block;
      position: relative;
      top: -60px;
      text-align: center;
    }
    div#timeline .dot span {
      display: inline-block;
      margin-top: 10px;
      width: 20px;
      height: 20px;
      background-color: #fff;
      position: relative;
      border-radius: 50%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
  </style>

</head>





<body>


  <div id="timeline">




    <div class="dot" id="1" style="background-color: #2c3e50;">
      <span></span>
      <date>P2</date>
    </div>

    <div class="dot" id="2">
      <span></span>
      <date>P2</date>
    </div>

    <div class="dot" id="3">
      <span></span>
      <date>P3</date>
    </div>

    <div class="dot" id="4">
      <span></span>
      <date>P4</date>
    </div>

    <div class="dot" id="5">
      <span></span>
      <date>P5</date>
    </div>

    <div class="dot" id="6">
      <span></span>
      <date>P5</date>
    </div>

    <div class="dot" id="7">
      <span></span>
      <date>P5</date>
    </div>

    <div class="dot" id="8">
      <span></span>
      <date>P5</date>
    </div>

    <div class="dot" id="9">
      <span></span>
      <date>P5</date>
    </div>



    <div class="inside"></div>
  </div>







  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
  <script>
    $('.dot:nth-child(1)').click(function() {
      $('.inside', $(this).parent()).animate({
        'width': '10%'
      }, 500);
    });
    $('.dot:nth-child(2)').click(function() {
      $('.inside', $(this).parent()).animate({
        'width': '20%'
      }, 500);
    });
    $('.dot:nth-child(3)').click(function() {
      $('.inside', $(this).parent()).animate({
        'width': '30%'
      }, 500);
    });
    $('.dot:nth-child(4)').click(function() {
      $('.inside', $(this).parent()).animate({
        'width': '40%'
      }, 500);
    });
    $('.dot:nth-child(5)').click(function() {
      $('.inside', $(this).parent()).animate({
        'width': '50%'
      }, 500);
    });
    $('.dot:nth-child(6)').click(function() {
      $('.inside', $(this).parent()).animate({
        'width': '60%'
      }, 500);
    });
    $('.dot:nth-child(7)').click(function() {
      $('.inside', $(this).parent()).animate({
        'width': '70%'
      }, 500);
    });
    $('.dot:nth-child(8)').click(function() {
      $('.inside', $(this).parent()).animate({
        'width': '80%'
      }, 500);
    });
    $('.dot:nth-child(9)').click(function() {
      $('.inside', $(this).parent()).animate({
        'width': '90%'
      }, 500);
    });
  </script>

</body>

</html>

＆＃13;

如何使整个圆圈可以点击（现在它只是可点击的中心）

0 个答案: