Hover: texte derrière texte

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Hover: texte derrière texte

Message par Maxwellx3 le Sam 16 Mai 2015 - 21:38

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.


Dernière édition par Maxwellx3 le Dim 17 Mai 2015 - 13:50, édité 1 fois

Maxwellx3
**

Féminin
Messages : 93
Inscrit(e) le : 01/08/2011

http://money-money-money.forumactif.fr/
Maxwellx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hover: texte derrière texte

Message par Kinotto le Sam 16 Mai 2015 - 21:47

Bonsoir,

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


Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hover: texte derrière texte

Message par Maxwellx3 le Sam 16 Mai 2015 - 21:53

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

Maxwellx3
**

Féminin
Messages : 93
Inscrit(e) le : 01/08/2011

http://money-money-money.forumactif.fr/
Maxwellx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hover: texte derrière texte

Message par Kinotto le Sam 16 Mai 2015 - 21:59

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. Mr. Green


Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hover: texte derrière texte

Message par MlleAlys le Sam 16 Mai 2015 - 22:26

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

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;
}

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hover: texte derrière texte

Message par Maxwellx3 le Dim 17 Mai 2015 - 1:36

C'est exactement ça MlleAlys . Je vous remercie Very Happy 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 :/

Maxwellx3
**

Féminin
Messages : 93
Inscrit(e) le : 01/08/2011

http://money-money-money.forumactif.fr/
Maxwellx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hover: texte derrière texte

Message par MlleAlys le Dim 17 Mai 2015 - 12:25

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;
    }

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hover: texte derrière texte

Message par Maxwellx3 le Dim 17 Mai 2015 - 13:49

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

Maxwellx3
**

Féminin
Messages : 93
Inscrit(e) le : 01/08/2011

http://money-money-money.forumactif.fr/
Maxwellx3 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum