1
votes

CSS Hover uniquement sur le texte?

Si j'ai le code HTML suivant avec une classe CSS personnalisée:

<div class="custom_list_item">Test</div>

.custom_list_item {
  color: black;
}

.custom_list_item:hover {
  color: red;
}

Cela fait en sorte que lorsque je survole la boîte entière, cela rend le texte rouge. Existe-t-il un moyen de m'assurer que cela ne se produit que lorsque je survole uniquement le texte lui-même?

html css text hover

3 commentaires

vous pouvez envelopper le texte dans un élément de paragraphe et y ajouter votre style. Est-ce clair pour vous?

Comme @ 08691 l'a dit ci-dessous, il s'agit d'un concept d'affichage simple. Un div par défaut a un bloc d'affichage, de sorte que div obtient tout l'espace disponible. Si vous voulez que .custom_list_item. obtenir uniquement la largeur du contenu, il suffit de modifier l'affichage des blocs par défaut donné aux DIV avec affichage: inline-block; Juste: .custom_list_item {display: inline-block; la couleur noire; }

@AlbertoFortes Non, en fait ce n'est pas ce que j'essaie d'accomplir. Étant donné que cela est destiné à être utilisé comme élément de liste, si je configure l'affichage sur blocage en ligne, il survolera toujours la boîte entière s'il y a un autre élément qui a un bloc de contenu plus large. La travée fonctionne parfaitement.

4 Réponses :

2
votes

Enveloppez-le en span puis en style span:

<div class="custom_list_item">
  <span>Test</span>
</div>

.custom_list_item {
  color: black;
}

.custom_list_item span:hover {
  color: red;
}

2 commentaires

Si vous changez p en span , vous avez une solution de travail;)

Oui. C'est une meilleure idée. Mise à jour de ma réponse en ce qui concerne vos conseils et votre réputation :) Merci.

6
votes

Enveloppez-le dans un span . Un p s'étendrait sur toute la largeur de div.

<div class="custom_list_item"><span>Test</span></div>

.custom_list_item {
    color: black;
}

.custom_list_item span:hover{
    color: red;
}

1 commentaires

Oui merci, c'est parfait. J'utilisais un p plus tôt et j'ai réalisé que cela n'aidait pas ma situation.

1
votes

Modifiez la propriété d'affichage de cette division à partir de block à inline-block . Aucun élément supplémentaire tel que les délais n'est nécessaire.

<div class="custom_list_item">Test</div>

.custom_list_item {
  color: black;
  display:inline-block;
}

.custom_list_item:hover {
  color: red;
}

Les divs sont des éléments de niveau bloc par défaut et occuperont toute la largeur de leur élément parent.

0 commentaires

1
votes

Vous pouvez envelopper un intervalle pour votre div et définir l'étendue: hover

<div class="custom_list_item"><span>Test</span></div>

.custom_list_item {
    color: black;
}

span:hover{
    color: red;
}

div{
border: 3px solid red;
}

0 commentaires