web-dev-qa-db-fra.com

CSS désactiver l'effet de survol

Je dois désactiver le survol de la souris sur un bouton particulier (pas sur tous les boutons) dans l'ensemble du DOM. S'il vous plaît laissez-moi savoir comment y parvenir en utilisant une classe CSS.

j'utilise la classe CSS ci-dessous lorsque mon bouton est désactivé. Maintenant, je veux supprimer l'effet de survol en utilisant la même classe.

.buttonDisabled
 {
 Cursor:text !important; Text-Decoration: None !important; 
 }

La classe ci-dessus se chargera de supprimer le signe de la main et le soulignement du texte au survol de la souris. Maintenant, je veux supprimer l'effet de vol stationnaire aussi. S'il vous plaît, faites-moi savoir.

csshover
25
user2681868

J'ai une solution très simple pour cela.

il suffit de créer une nouvelle classe

.noHover{
    pointer-events: none;
}

et utilisez-le pour désactiver n'importe quel événement. utilisez-le comme:

<a href='' class='btn noHover'>You cant touch ME :P</a>
67
Seetpal singh

ajouter ce qui suit pour ajouter un effet de survol sur le bouton désactivé

   .buttonDisabled:hover
     {
       /*your code goes here*/
     }
6
Abu Mohammad Rasel

Vous pouvez y parvenir en utilisant: not selector:

Code HTML:

<a class="button">Click me</a>
<a class="button disable">Click me</a>

Code CSS (utilisant scss):

.button {
  background-color: red;
  &:not(.disable):hover {
    /* apply hover effect here */
  }   
}

De cette manière, vous appliquez le style d'effet de survol lorsqu'une classe spécifiée (.disable) n'est pas appliquée.

3
Simone Colnaghi

Pour désactiver l'effet de survol, j'ai deux suggestions:

  • si votre effet de survol est déclenché par JavaScript, utilisez simplement $.unbind('hover');
  • si votre style de survol est déclenché par la classe, utilisez simplement $.removeClass('hoverCssClass');

Utiliser CSS !important _ pour remplacer CSS rendra votre CSS très malpropre, cette méthode n’est donc pas recommandée. Vous pouvez toujours dupliquer un style CSS avec un nom de classe différent pour conserver le même style.

3
infiniteloop

D'après votre question, tout ce que je peux comprendre, c'est que vous avez déjà un effet de survol sur votre bouton que vous souhaitez supprimer. Pour cela, supprimez le fichier CSS qui cause l’effet de survol ou remplacez-le.

Pour annuler, faites ceci

.buttonDisabled:hover
{
    //overriding css goes here
}

Par exemple, si la couleur d'arrière-plan de votre bouton passe du rouge au bleu, Dans le css prioritaire, vous le rendrez en rouge pour qu'il ne change pas.

Passez également par toutes les règles d'écriture et de suppression de CSS. Familiarisez-vous avec ce que css aura quelle priorité.

Bonne chance.

2
shinobi

Voici un moyen de désactiver l'effet de survol.

.table-hover > tbody > tr.hidden-table:hover > td {
    background-color: unset !important;
    color: unset !important;
}
0
Pawan Kumar