Question

我想点击文本链接到其他子页面，如图所示webpage screen shot，但是最后一个包装器覆盖了其他包装器，因此无论我在哪里单击，它都将链接到同一个包装器。如何解决这个问题呢？

以下是代码：

<div class="bubbles">

 <a href="file:///Users/xieweiy/Desktop/Sparsh/subpage.htm#awareness">
  <div class="bubble-wrapper bubble-wrapper--1">
    <div class="bubble">
      <div class="bubble__inner">
        <p class="bubble__text style="font-family: 'Bree', serif">Awareness<br>about Diabetes</p>

        <svg class="bubble__graphic" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 200 240" xml:space="preserve">
          <path class="bubble__path bubble__path--white" d="M176.2 35.2C157.2 12.8 129.3 0 100 0 70.7 0 42.8 12.8 23.8 35.2c-35.7 42-30.6 105 11.4 140.8 0 0 0.1 0 0.1 0.1 6.3 5.3 13.3 9.8 20.7 13.5 0 0 14.6 8.8 20.9 15 9.3 9.1 16.2 20.3 20.1 32.6 0.2 0.8 0.6 1.5 1.2 2.1 0.5 0.5 1.2 0.8 1.9 0.8 0.7-0.1 1.3-0.4 1.9-0.8 0.5-0.6 0.9-1.3 1.2-2.1 3.9-12.3 10.9-23.5 20.1-32.6 6.3-6.2 20.9-15 20.9-15 7.4-3.6 14.4-8.1 20.7-13.5C206.8 140.4 212 77.3 176.2 35.2 176.2 35.3 176.2 35.2 176.2 35.2z"></path>
          </svg>
     </div>
    </div>
  </div>
</a>

 <a href="file:///Users/xieweiy/Desktop/Sparsh/subpage.htm#tele">
  <div class="bubble-wrapper bubble-wrapper--2">
    <div class="bubble">
      <div class="bubble__inner">
        <p class="bubble__text">Tele Counselling<br>in 12 Languages</p>

        <svg class="bubble__graphic" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 200 240" xml:space="preserve">
          <path class="bubble__path bubble__path--yellow" d="M176.2 35.2C157.2 12.8 129.3 0 100 0 70.7 0 42.8 12.8 23.8 35.2c-35.7 42-30.6 105 11.4 140.8 0 0 0.1 0 0.1 0.1 6.3 5.3 13.3 9.8 20.7 13.5 0 0 14.6 8.8 20.9 15 9.3 9.1 16.2 20.3 20.1 32.6 0.2 0.8 0.6 1.5 1.2 2.1 0.5 0.5 1.2 0.8 1.9 0.8 0.7-0.1 1.3-0.4 1.9-0.8 0.5-0.6 0.9-1.3 1.2-2.1 3.9-12.3 10.9-23.5 20.1-32.6 6.3-6.2 20.9-15 20.9-15 7.4-3.6 14.4-8.1 20.7-13.5C206.8 140.4 212 77.3 176.2 35.2 176.2 35.3 176.2 35.2 176.2 35.2z"></path>
        </svg>
     </div>
    </div>
 </div>

 <a href="file:///Users/xieweiy/Desktop/Sparsh/subpage.htm#real-time">
  <div class="bubble-wrapper bubble-wrapper--3">
    <div class="bubble">
      <div class="bubble__inner">
        <p class="bubble__text">Real-time Access<br>to Patient Progress</p>

        <svg class="bubble__graphic" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 200 240" xml:space="preserve">
          <path class="bubble__path bubble__path--white" d="M176.2 35.2C157.2 12.8 129.3 0 100 0 70.7 0 42.8 12.8 23.8 35.2c-35.7 42-30.6 105 11.4 140.8 0 0 0.1 0 0.1 0.1 6.3 5.3 13.3 9.8 20.7 13.5 0 0 14.6 8.8 20.9 15 9.3 9.1 16.2 20.3 20.1 32.6 0.2 0.8 0.6 1.5 1.2 2.1 0.5 0.5 1.2 0.8 1.9 0.8 0.7-0.1 1.3-0.4 1.9-0.8 0.5-0.6 0.9-1.3 1.2-2.1 3.9-12.3 10.9-23.5 20.1-32.6 6.3-6.2 20.9-15 20.9-15 7.4-3.6 14.4-8.1 20.7-13.5C206.8 140.4 212 77.3 176.2 35.2 176.2 35.3 176.2 35.2 176.2 35.2z"></path>
        </svg>
      </div>
    </div>
  </div>
</a>

<a href="file:///Users/xieweiy/Desktop/Sparsh/subpage.htm#adherence">
  <div class="bubble-wrapper bubble-wrapper--4">
    <div class="bubble">
      <div class="bubble__inner">
        <p class="bubble__text">Complimentary<br>Adherence Support</p>

        <svg class="bubble__graphic" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 200 240" xml:space="preserve">
          <path class="bubble__path bubble__path--yellow" d="M176.2 35.2C157.2 12.8 129.3 0 100 0 70.7 0 42.8 12.8 23.8 35.2c-35.7 42-30.6 105 11.4 140.8 0 0 0.1 0 0.1 0.1 6.3 5.3 13.3 9.8 20.7 13.5 0 0 14.6 8.8 20.9 15 9.3 9.1 16.2 20.3 20.1 32.6 0.2 0.8 0.6 1.5 1.2 2.1 0.5 0.5 1.2 0.8 1.9 0.8 0.7-0.1 1.3-0.4 1.9-0.8 0.5-0.6 0.9-1.3 1.2-2.1 3.9-12.3 10.9-23.5 20.1-32.6 6.3-6.2 20.9-15 20.9-15 7.4-3.6 14.4-8.1 20.7-13.5C206.8 140.4 212 77.3 176.2 35.2 176.2 35.3 176.2 35.2 176.2 35.2z"></path>
        </svg>
      </div>
    </div>
  </div>
</a>

<a href="file:///Users/xieweiy/Desktop/Sparsh/subpage.htm#multilingual">
  <div class="bubble-wrapper bubble-wrapper--5">
    <div class="bubble">
      <div class="bubble__inner">
        <p class="bubble__text">Multi-lingual Patient<br>Education Literature</p>

        <svg class="bubble__graphic" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 200 240" xml:space="preserve">
          <path class="bubble__path bubble__path--white" d="M176.2 35.2C157.2 12.8 129.3 0 100 0 70.7 0 42.8 12.8 23.8 35.2c-35.7 42-30.6 105 11.4 140.8 0 0 0.1 0 0.1 0.1 6.3 5.3 13.3 9.8 20.7 13.5 0 0 14.6 8.8 20.9 15 9.3 9.1 16.2 20.3 20.1 32.6 0.2 0.8 0.6 1.5 1.2 2.1 0.5 0.5 1.2 0.8 1.9 0.8 0.7-0.1 1.3-0.4 1.9-0.8 0.5-0.6 0.9-1.3 1.2-2.1 3.9-12.3 10.9-23.5 20.1-32.6 6.3-6.2 20.9-15 20.9-15 7.4-3.6 14.4-8.1 20.7-13.5C206.8 140.4 212 77.3 176.2 35.2 176.2 35.3 176.2 35.2 176.2 35.2z"></path>
        </svg>
      </div>
    </div>
  </div>
</a>

 <a href="file:///Users/xieweiy/Desktop/Sparsh/subpage.htm#tele">
  <div class="bubble-wrapper bubble-wrapper--6">
    <div class="bubble">
      <div class="bubble__inner">
        <p class="bubble__text">Customised Diet<br>Lifestyle Support</p>

        <svg class="bubble__graphic" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 200 240" xml:space="preserve">
          <path class="bubble__path bubble__path--yellow" d="M176.2 35.2C157.2 12.8 129.3 0 100 0 70.7 0 42.8 12.8 23.8 35.2c-35.7 42-30.6 105 11.4 140.8 0 0 0.1 0 0.1 0.1 6.3 5.3 13.3 9.8 20.7 13.5 0 0 14.6 8.8 20.9 15 9.3 9.1 16.2 20.3 20.1 32.6 0.2 0.8 0.6 1.5 1.2 2.1 0.5 0.5 1.2 0.8 1.9 0.8 0.7-0.1 1.3-0.4 1.9-0.8 0.5-0.6 0.9-1.3 1.2-2.1 3.9-12.3 10.9-23.5 20.1-32.6 6.3-6.2 20.9-15 20.9-15 7.4-3.6 14.4-8.1 20.7-13.5C206.8 140.4 212 77.3 176.2 35.2 176.2 35.3 176.2 35.2 176.2 35.2z"></path>
        </svg>
      </div>
    </div>
  </div>
  </a>

.bubbles {
    width:inherit;
    height:inherit;
    left:0;
    position:absolute;
    top:0;
    z-index:6
}
.bubble {
    width:20rem;
    height:20rem;
    -webkit-animation:scale-circles 2s 2.5s forwards;
    -o-animation:scale-circles 2s 2.5s forwards;
    animation:scale-circles 2s 2.5s forwards;
    left:50%;
    letter-spacing:.02em;
    margin-left:-10rem;
    position:absolute;
    top:0
}
.bubble__inner {
    width:inherit;
    height:inherit;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-animation:floating ease-in-out 3s 4.5s infinite;
    -o-animation:floating ease-in-out 3s 4.5s infinite;
    animation:floating ease-in-out 3s 4.5s infinite;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.bubble-wrapper--1 .bubble__inner {
    -webkit-animation:floating ease-in-out 4s 4.3s infinite;
    -o-animation:floating ease-in-out 4s 4.3s infinite;
    animation:floating ease-in-out 4s 4.3s infinite
}
.bubble-wrapper--2 .bubble__inner {
    -webkit-animation:floating ease-in-out 5s 4.9s infinite;
    -o-animation:floating ease-in-out 5s 4.9s infinite;
    animation:floating ease-in-out 5s 4.9s infinite
}
.bubble-wrapper--3 .bubble__inner {
    -webkit-animation:floating ease-in-out 3s 4.4s infinite;
    -o-animation:floating ease-in-out 3s 4.4s infinite;
    animation:floating ease-in-out 3s 4.4s infinite
}
.bubble-wrapper--4 .bubble__inner {
    -webkit-animation:floating ease-in-out 3s 4.7s infinite;
    -o-animation:floating ease-in-out 3s 4.7s infinite;
    animation:floating ease-in-out 3s 4.7s infinite
}
.bubble-wrapper--5 .bubble__inner {
    -webkit-animation:floating ease-in-out 4s 4.7s infinite;
    -o-animation:floating ease-in-out 4s 4.7s infinite;
    animation:floating ease-in-out 4s 4.7s infinite
}
.bubble-wrapper--6 .bubble__inner {
    -webkit-animation:floating ease-in-out 5s 4.2s infinite;
    -o-animation:floating ease-in-out 5s 4.2s infinite;
    animation:floating ease-in-out 5s 4.2s infinite
}
.bubble-wrapper--7 .bubble__inner {
    -webkit-animation:floating ease-in-out 5s 4.5s infinite;
    -o-animation:floating ease-in-out 5s 4.5s infinite;
    animation:floating ease-in-out 5s 4.5s infinite
}
.bubble__text {
    color:rgba(0, 135, 124, 0.8);
    font:1.4rem/1.2 Appetite, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top:1.75rem;
    position:relative;
    z-index:1
}
.bubble-wrapper--1 .bubble__text {
    margin-right:.5em;
    -webkit-transform:rotate(60deg);
    -o-transform:rotate(60deg);
    transform:rotate(60deg)
}
.bubble-wrapper--2 .bubble__text {
    margin-right:.5em;
    margin-top:.5em;
    -webkit-transform:rotate(120deg);
    -o-transform:rotate(120deg);
    transform:rotate(120deg)
}
.bubble-wrapper--3 .bubble__text {
    margin-bottom:1.25em;
    -webkit-transform:rotate(135deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg)
}
.bubble-wrapper--4 .bubble__text {
    margin-bottom:1.5em;
    -webkit-transform:rotate(240deg);
    -o-transform:rotate(240deg);
    transform:rotate(240deg)
}
.bubble-wrapper--5 .bubble__text {
    margin-bottom:1.25em;
    -webkit-transform:rotate(300deg);
    -o-transform:rotate(300deg);
    transform:rotate(300deg)
}
.bubble-wrapper--6 .bubble__text {
    margin-left:.5em;
    margin-top:.5em;
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg)
}
.bubble-wrapper--7 .bubble__text {
    margin-left:.5em;
    -webkit-transform:rotate(315deg);
    -o-transform:rotate(315deg);
    transform:rotate(315deg)
}
.bubble__graphic {
    left:0;
    position:absolute;
    right:0;
    top:0
}
.bubble__path--white {
    fill:#FFB6C1
}
.bubble__path--yellow {
    fill:#FFB6C1
}
@media (max-width:767px) {
.bubble {
    -webkit-animation:none;
    -o-animation:none;
    animation:none
}
}
.bubble-wrapper {
    width:42rem;
    height:42rem;
    -webkit-animation:reveal-circles 2s 2.5s forwards;
    -o-animation:reveal-circles 2s 2.5s forwards;
    animation:reveal-circles 2s 2.5s forwards;
    left:50%;
    margin:-21rem 0 0 -21rem;
    position:absolute;
    top:50%
}
.bubble-wrapper.mobile {
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
    width:35rem;
    height:35rem;
    font-size:3rem;
    z-index:99;
    opacity:0;
    margin:-17.5rem 0 0 -17.5rem
}
.bubble-wrapper.mobile.bubble-wrapper--1 {
    -webkit-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:.7s;
    -o-animation-delay:.7s;
    animation-delay:.7s
}
.bubble-wrapper.mobile.bubble-wrapper--2 {
    -webkit-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:2.8s;
    -o-animation-delay:2.8s;
    animation-delay:2.8s
}
.bubble-wrapper.mobile.bubble-wrapper--3 {
    -webkit-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:4.9s;
    -o-animation-delay:4.9s;
    animation-delay:4.9s
}
.bubble-wrapper.mobile.bubble-wrapper--4 {
    -webkit-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:7s;
    -o-animation-delay:7s;
    animation-delay:7s
}
.bubble-wrapper.mobile.bubble-wrapper--5 {
    -webkit-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:9.1s;
    -o-animation-delay:9.1s;
    animation-delay:9.1s
}
.bubble-wrapper.mobile.bubble-wrapper--6 {
    -webkit-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:11.3s;
    -o-animation-delay:11.3s;
    animation-delay:11.3s
}
.bubble-wrapper.mobile.bubble-wrapper--7 {
    -webkit-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:13.4s;
    -o-animation-delay:13.4s;
    animation-delay:13.4s
}
.bubble-wrapper.mobile.bubble-wrapper--8 {
    -webkit-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:15.5s;
    -o-animation-delay:15.5s;
    animation-delay:15.5s
}
.bubble-wrapper--1 {
    -webkit-transform:rotate(-60deg);
    -o-transform:rotate(-60deg);
    transform:rotate(-60deg)
}
.bubble-wrapper--2 {
    -webkit-transform:rotate(-120deg);
    -o-transform:rotate(-120deg);
    transform:rotate(-120deg)
}
.bubble-wrapper--3 {
    -webkit-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg)
}
.bubble-wrapper--4 {
    -webkit-transform:rotate(-240deg);
    -o-transform:rotate(-240deg);
    transform:rotate(-240deg)
}
.bubble-wrapper--5 {
    -webkit-transform:rotate(-300deg);
    -o-transform:rotate(-300deg);
    transform:rotate(-300deg)
}
.bubble-wrapper--6 {
    -webkit-transform:rotate(-360deg);
    -o-transform:rotate(-360deg);
    transform:rotate(-360deg)
}
.bubble-wrapper--7 {
    -webkit-transform:rotate(-360deg);
    -o-transform:rotate(-315deg);
    transform:rotate(-315deg)

Answer 1

首先;

更改宽度：inherit，height：在.bubbles属性中继承100％的属性。

.bubbles {
    width: 100%;
    height: 100%;
    left:0;
    position:absolute;
    top:0;
    z-index:6
}

之后;所有你的.bubble-wrapper项目似乎都与left: 50%; top: 50%;对齐并且有负余量（ - （宽度/ 2））以对齐中心我认为对吗？这可能是问题所在。

如果您知道自己有多少个气泡，那么您可以手动为它们指定正确值和最高值，并使用transform-origin: 50% 50%;将它们从中心旋转。

例如;

https://jsfiddle.net/47jd7yt7/

包装器覆盖了我要添加链接的文本

1 个答案: