Блог

У меня есть кнопка в социальных сетях на домашней странице моего личного веб-сайта. На самом деле это работает довольно хорошо, но когда я пытаюсь добавить текст на кнопку (например, СЛЕДОВАТЬ), текстовый слой делает его недоступным. В моем коде нет задействованной функции JS. Как я могу решить эту проблему?

Заранее спасибо.

Правка: добавлен CSS-код.

Правка №2: Спасибо за все ответы. Однако коды <button> тегов и JS не сработали для меня в этой ситуации. Наконец-то мне удалось уменьшить область текстового слоя, удалив height и width свойства из .social-text класса, и теперь текст не влияет на функциональность кнопок. Он по-прежнему перекрывает кнопку, но на минимальной площади и больше не вызывает проблем. Я добавляю скриншот фиксированной кнопки. Счастливого кодирования!

HTML:

          <div>
       
         <ul id="menu">
        
             <a class="menu-button icon-plus" href="#menu" title="Show navigation"></a>
             <a class="menu-button icon-minus" href="#0" title="Hide navigation"></a>
             
             <li class="menu-item">
                 <a href="https://www.instagram.com" target="_blank">
                     <span class="fa fa-instagram"></span>
                 </a>
             </li>
             <li class="menu-item">
                 <a href="https://www.facebook.com" target="_blank">
                     <span class="fa fa-facebook"></span>
                 </a>
             </li>
             <li class="menu-item">
                 <a href="https://twitter.com" target="_blank">
                     <span class="fa fa-twitter"></span>
                 </a>
             </li>
             <li class="menu-item">
                 <a href="https://linkedin.com/in" target="_blank">
                     <span class="fa fa-linkedin"></span>
                 </a>
             </li>
         </ul>
         <span class="social-text">FOLLOW</span>
         </div>
 

CSS:

     #menu {
     text-align: center;
     width: 11vw;
     height: 11vw;
     position: absolute;
     left: 50%;
     top: 23vw;
     margin-left: 23vw;
     margin-top: 6vw;
     list-style: none;
     font-size: 2.5vw;
   }

    .menu-button {
     opacity: 0;
     z-index: -1;
    }
         
    .menu-button {
      width: 11vw;
      height: 11vw;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -5.8vw 0 0 -5.8vw;
      border-radius: 50%;
      background: #424242;
      background-size: 100%;
      overflow: hidden;
      text-decoration: none;
     }

     #menu:not(:target)>a:first-of-type,
     #menu:target>a:last-of-type {
      opacity: 1;
      z-index: 1;
     }

     #menu:not(:target)>.icon-plus:before, 
     #menu:target>.icon-minus:before {
       opacity: 1;
     }

     .menu-item {
        width: 5.5vw;
        height: 5.5vw;
        position: absolute;
        left: 55%;
        line-height: 1vw;
        top: 70%;
        margin: -3.9vw 0 0 -3.9vw;
        border-radius: 50%;
        background-color: #424242;
        transform: translate(0vw, 0vw);
        transition: transform 500ms;
        z-index: -2;        
        transition: .5s;
       }

       .menu-item:hover{
         opacity: 0.5;
         box-shadow: 0 0.4vw 0.8vw black; 
        }


      .menu-item a {
         color: #fff;
         position: relative;
         top: 30%;
         left: 0;
         text-decoration: none;
       }

      #menu:target>.menu-item:nth-child(6) {
        transform: rotate(60deg) translateY(-11.7vw) rotate(300deg);
        transition-delay: 0s;
      }

      #menu:target>.menu-item:nth-child(5) {
        transform: rotate(20deg) translateY(-12.1vw) rotate(-20deg);
        transition-delay: 0.1s;
      }

     #menu:target>.menu-item:nth-child(3) {
       transform: rotate(-20deg) translateY(-12.1vw) rotate(20deg);
       transition-delay: 0.2s;
     }

     #menu:target>.menu-item:nth-child(4) {
       transform: rotate(-60deg) translateY(-11.7vw) rotate(60deg);
       transition-delay: 0.3s;
     }

     .social-text {
       text-align: center;
       width: 11vw;
       height: 11vw;
       position: absolute;
       left: 50%;
       top: 23vw;
       margin-left: 23vw;
       margin-top: 6vw;
       z-index: 2;

    } 
 

Используйте тег кнопки в вашем промежутке, т. е.,

 <span><button class="social-text">Follow</button></span>
 

или либо напрямую использовать <button> , не нужно добавлять <span> . Вот идет JS:-

     const btn=document.querySelector('.social-text');
btn.addEventListener("click",function(){
    console.log("Followed");
})
 

Вы можете попробовать использовать <button>

 const btn = document.getElementById("btn-follow");

btn.addEventListener("click", () => {
  console.log("followed");
}); 

 <button id="btn-follow">FOLLOW</button> 

Или вы можете добавить a role="button" в свой тег span

 const span = document.getElementById("span-follow");

span.addEventListener("click", () => {
  console.log("followed");
}); 

 <span id="span-follow" role="button">FOLLOW</span> 

Если вы хотите создать кнопку «Круг», вы можете создать круг с помощью a <div> и использовать его как <button>

 const btn = document.getElementById("btn-follow");

btn.addEventListener("click", () => {
  console.log("followed");
}); 

 .social-circle {
  text-align: center;
  width: 11vw;
  height: 11vw;
  line-height: 11vw;
  border-radius: 50%;
  background: #F77;
}

.social-text {
  color: #fff;
}

.cursor-pointer {
  cursor: pointer;
} 

 <div class="social-circle cursor-pointer" id="btn-follow" role="button">
  <span class="social-text" role="button">FOLLOW</span>
</div> 

Вы не использовали тег кнопки. Таким образом, отображается только текст «Следовать». Попробуй это.

 <button class="social-text">Follow</button>