Hover: texte derrière texte

[Maxwellx3]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir **
J'essaye de faire un effet hover dans la description de mes catégories. Par contre, le résultat n'est pas EXACTEMENT comme je le voulais. Lorsqu'on passe la souris sur le texte, un autre apparait certes. Mais ce que je voudrais, c'est que le changement se fasse dès que l'on passe la souris sur le fond beige (le background-color). J'ai essayé plusieurs choses qui n'ont pas fonctionné. J'espère que vous pourrez m'aider. Le CSS correspondant, le HTML ainsi que le template se trouvent sous hide.

HTML


CSS


TEMPLATE



PS: l'adresse du forum est sous hide.

[Invité]

Bonsoir,

Je poste pour voir les informations.
EDIT : Le fond beige correspond-il à la description où se trouve l'effet sur le texte ?


Cordialement.

[Maxwellx3]

Oui c'est la description ** je l'ai mis dans le template.

[Invité]

Alors en fait, pour ce simple détail, on bascule dans un niveau radicalement supérieur, puisque vous voulez l'appliquer à cette entité (la description) précise alors qu'à l'inverse du texte, elle est générée par une variable. Il faudrait donc soit appliquer un code Javascript (que je ne suis pas apte à réaliser), soit coder toutes vos catégories à la main, ce qui, je présume, est une solution inenvisageable, à moins que vous n'ayez beaucoup de temps et de maniabilité (puisque tout devra être fait à la main à l'avenir) à perdre.


Cordialement.

[MlleAlys]

Bonjour,
pas besoin de javacript ici, à moins que j'aie mal compris ce que vous souhaitiez faire

Il faut modifier le css pour faire apparaitre le span.text-hover non pas au survol du span.button, mais au survol du bloc div.cate_description
C'est à dire en termes de code, modifier ce code :

Code:

.button:hover span.text-hover {
  display: inherit;
  position: absolute;
}

en :

Code:

.cate_description:hover span.text-hover {
  display: inherit;
  position: absolute;
}

Et, sur le même principe, modifier :

Code:

.button:hover span.text-base {
  opacity: 0;
}

en :

Code:

.cate_description:hover span.text-base {
  opacity: 0;
}

[Maxwellx3]

C'est exactement ça MlleAlys . Je vous remercie Merci à vous également kinotto.

Je me demande s'il est possible de rajouter un effet de transition. Une sorte de fondu ?

De plus, j'ai remarqué un petit souci. J'ai mis des liens en hover, c'est à dire le texte caché. Mais ceux-ci ne semblent pas fonctionner :/

[MlleAlys]

Les liens ne fonctionnent pas parce que, bien que d'opacité 0, l'autre texte est toujours au dessus, et du coup on voit en dessous mais on accède pas réellement aux liens...
Don il faut pour commencer mettre le texte qu'on veut voir aparaitre après l'autre, de façon à ce que par défaut il soit par dessus ^^
Ensuite, on peut jouer avec les positions absolues pour que chaque élément reste à la bonne place, avec des div ça sera cependant plus facile qu'avec des span ^^
Et enfin, l'effet de transition sera mis sur l'opacité grâce à la propriété css transition.

• On va donc modifier légèrement le code html ainsi :
  
  
  
• Ajoutez le code css :
  

  Code:

  .button {
  position: relative;
}

  De façon à ce que les positions absolues qu'on va ajouter se réfèrent à ce bloc.
  
  
• Localiser le code css :
  

  Code:

  .text-base {
  opacity: 1;
}

• Et complétez le ainsi :
  

  Code:

  .text-base {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 350px;
  min-height: 50px;
  opacity: 1;
  transition: opacity 0.5s ease;
}

  (les dimensions minimales permettent d'éviter quelques interactions embêtantes avec le titre qui passe par dessus)
  
  
• Localisez le code css :
  

  Code:

  .cate_description:hover span.text-base {
  opacity: 0;
}

• et puisque maintenantc'est une div, modifiez-le ainsi pour qu'il reste valable :
  

  Code:

  .cate_description:hover .text-base {
  opacity: 0;
}

  
  
• Localisez le code css :
  

  Code:

  .text-hover {
  display: none;
}

• Et modifiez-le ainsi :
  

  Code:

  .text-hover {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 350px;
  min-height: 50px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

  
  
• Et enfin, localisez le code :
  

  Code:

  .cate_description:hover span.text-hover {
  display: inherit;
  position: absolute;
}

• et modifiez le ainsi :
  

  Code:

  .cate_description:hover .text-hover {
  opacity: 1;
}

[Maxwellx3]

C'est parfait comme ça Je vous remercie encore MlleAlys.
Résolu !