'/> '/> '/> La propriété Transform CSS ne fonctionne pas avec l'élément <a> | abulletproofidea.com

Question La propriété Transform CSS ne fonctionne pas avec l'élément


je veux scale(x,y) mon <a> élément lorsque je clique dessus, mais cela ne fonctionne pas. J'utilise le navigateur Web Mozilla Firefox pour exécuter le programme.

Voici mon code:

scaleElement.html

<html>
    <head>
        <title>CSS3 Transform and Transition</title>
        <style>
            a{
                background-color: green;
                color: white;
                padding: 10px 20px;
                text-decoration: none;
                border: 2px solid #85ADFF;
                border-radius: 30px 10px;
                transition: 2s;
            }
            a:hover{
                transform: scale(2,2);
            }
        </style>
    </head>

    <body>
        <center><a href="xyz.html">click here</a></center>
    </body>
</html>

13
2018-04-16 07:16


origine


Réponses:


transform n'est pas applicable aux éléments en ligne tels que <a>. Vous pouvez afficher le lien comme inline-block ou block se transformer pour travailler:

élément transformable

Un élément transformable est un élément de l'une des catégories suivantes:

  • un élément dont la disposition est régie par le modèle de boîte CSS qui est soit un niveau de bloc ou niveau inline atomique élément, ou dont l'affichage   propriété calcule en table-ligne, table-ligne-groupe, table-en-tête-groupe,   table-footer-group, table-cell ou légende de table [...]

niveau inline atomique les éléments incluent:

remplacé les éléments de niveau en ligne, les éléments de bloc en ligne et   éléments de tableau en ligne

a { display: inline-block; }
a:hover { transform: scale(2,2); }

En plus, il n'y a pas sur clic état disponible en CSS. Les options possibles sont :active ou :hoverou en utilisant case à cocher.

a {
  background-color: green;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid #85ADFF;
  border-radius: 30px 10px;
  transition: all 2s;
  display: inline-block; /* <-- added declaration */
}
a:hover{ transform: scale(2,2); }
/* just for demo */
body { padding: 2em; text-align: center; }
<a href="xyz.html">click here</a>


18
2018-04-16 07:19



Utilisation display:block et lui donner une hauteur et une largeur

a {
  background-color: green;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid #85ADFF;
  border-radius: 30px 10px;
  transition: 2s all ease-in;
  display: block;
  width:100px;
  height:50px;
}
a:hover {
  transform: scale(2, 2);
}
<center><a href="xyz.html">click here</a>
</center>


5
2018-04-16 07:19