Dev Faq
0
votes

Survolez le bouton de survol, StrikethRough Text

J'essaie de modifier mon code afin que si je portais sur le bouton Supprimer, le texte obtient une ligne strikethRough, comme l'option CSS Texte-décoration: ligne par . EDIT: J'essaie d'avoir le texte "Création de ce site Web de base todo" avec une striétéhrough, lors de la navigation sur le bouton Supprimer

y a-t-il d'une manière? Pour ce faire, sans utiliser JS, ou dois-je utiliser JS? (J'utilise actuellement Bootstrap4)

La partie de code est la suivante: xxx

2 commentaires

Qu'avez-vous essayé?

J'ai essayé d'ajouter à CSS: TD: Last-Enfant: Hover ~ TD {Texte-Décoration: ligne à travers; } De sorte que le texte "Créer ce site Web de base TODO" obtient le texte-décoration, mais cela ne fonctionne pas, comme les autres combinaisons de parents / frères de sœurs de CSS que j'ai essayés

3 Réponses :

1
votes

Lorsque vous utilisez BootsTrap X, vous pouvez toujours utiliser CSS:

p> 

<button class="not-available">
    <i>create</i>
</button>
<button>
    <i>delete</i>
</button>

2 commentaires

Merci pour votre aide, mais je veux faire une ligne via le texte "Création de ce site Web de base TODO", pas via le texte "Supprimer"

@Elmagico, je modifie le bloc de code pour séparer chaque bouton. Essayez!

2
votes

Vous pouvez le faire avec CSS 

i:hover {
     text-decoration: line-through;
  }

1 commentaires

Merci pour votre aide, mais je veux faire une ligne via le texte "Création de ce site Web de base TODO", pas via le texte "Supprimer"

1
votes

D'accord, je pense que je comprends votre problème. Le problème est qu'il n'y a pas de sélecteur «frère précédent» ou «parent» dans CSS. Mais je pense une petite modification Dom délicate et pure CSS, vous pouvez faire votre objectif.

p> 

<table border=1>
  <tr>
     <td>
      <button type="button" class="btn btn-warning">
          <i class="material-icons">delete</i>
      </button>
    </td>
    <td>
      <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
          <i class="material-icons">create</i>
       </button>
     </td>
    <td>
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
      </div>
    </td>
    <td>14/05/2020</td>
    <td class="text-justify your-text">Creating this basic TODO Website</td>
    <th scope="row">3</th>
  </tr>
</table>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor