¿Cómo puedo utilizar cursor: no se permite el en botón o un? He intentado lo siguiente:

.not-allowed {
     pointer-events: auto! important;
     cursor: not-allowed! important;
}

Mi botón se parece a esto:

<a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test</a>

Sin el puntero de eventos está activada, el cursor no se puede cambiar. Pero si puntero-eventos: auto, el botón o un se puede hacer clic. Si el puntero-eventos: ninguno el cursor no cambia.

Por favor que me ayude, que me desespero!

  • Tal vez de usar pointer-events: auto !important; (espacio antes del signo de exclamación)
InformationsquelleAutor PaT | 2018-05-15

4 Comentarios

  1. 16

    Este es en realidad un error en Bootstrap

    La propuesta de soluciones :

    button:disabled {
      cursor: not-allowed;
      pointer-events: all !important;
    }

    o si usted tiene este tipo de estructura :

    <li class="disabled">
      <a href="#">My Link</a>
    </li>

    luego

    li.disabled {
      cursor: not-allowed;
    }
    li.disabled a {
      pointer-events: none;
    }
    • Gracias, me salvaron algunos tirones de pelo
    • Me alegro ayudó.
    • tirar del pelo está a la derecha – la realización de la eliminación de los eventos de puntero en el anidado de una etiqueta, que esta prescribe perfectamente. Gracias a esto nuestro cabello se conserva!
  2. 2

    uso onclick="return false;"

    CSS:

    .not-allowed{
     cursor: not-allowed! important;
        
    }

    HTML:

    <a class="btn btn-primary btn-lg disabled not-allowed" onclick="return false;" href="https://www.example.com" role="button">Test</a>

    • contar conmigo para obtener más ayuda
  3. 2

    Usted tiene un número de opciones, pero no todos ellos son iguales.

    Preferiblemente, envuelva el elemento con un div o span y coloque el cursor en el contenedor, y el puntero-eventos en el contenido. De esta manera, usted obtiene todos los beneficios sin jugar con JS.

    Segundo, puede utilizar el atributo disabled en un botón, lo que hará de modo que no trabajo. Usted puede thenset el cursor sobre la movilidad del elemento.

    Por último, pero yo no lo aconsejo, es el uso de JS para return false. Aunque esto funciona, no me gusta porque: el evento click es todavía activa (es decir, de un solo clic es posible pero no se sigue el vínculo a través de), lo que significa que también visualmente creo que usted ha hecho clic en el botón.

    CSS:

    .disabled-wrapper {
      display: inline-block;
      cursor: not-allowed;
    }
    
    .disabled-wrapper a,
    .disabled-wrapper button {
      pointer-events: none;
    }
    
    button[disabled] {
      cursor: not-allowed;
    }
    
    a.disabled.js-test,
    button.disabled.js-test {
      cursor: not-allowed;
    }

    HTML:

    <div class="disabled-wrapper"><a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test wrapper</a></div>
    
    <button class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button" disabled>Test disabled attribute</button>
    
    <a class="btn btn-primary btn-lg disabled not-allowed js-test" href="https://www.example.com" role="button" onclick="return false">Test JS</a>

    • Muchas gracias. La solución con el contenedor funciona bien!
    • Si la respuesta ayudado a usted, por favor, acepte haciendo clic en la marca de verificación junto a la respuesta. Gracias.

Dejar respuesta

Please enter your comment!
Please enter your name here