Problème de changement d'opacité au survol

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

Résolu Problème de changement d'opacité au survol

Message par Daewyn le Dim 27 Juil 2014 - 4:52

Bonjour, bonsoir, et merci d'avance à celui qui m'aidera.

Mon problème est simple : j'essaie de rajouter une image de fond à mon bloc sous-forums qui changerait d'opacité au survol des liens... mais sans toucher à l'opacité des liens en question (juste l'image de fond, donc). Sauf que je n'y arrive pas vraiment malgré plusieurs tentatives ^^""

Voici le bout de Template associé (index_body) :

Code:
<!-- BEGIN forumrow -->
  <tr><td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
  <div class="titleline"></div>
          <table><tr>
  <td align="left" valign="top"><div class="blockstats">
    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
    <span class="gensmall"><span style="color: #80120C;"><strong>{catrow.forumrow.POSTS}</strong></span> messages ● <span style="color: #80120C;"><strong>{catrow.forumrow.TOPICS}</strong></span> sujets</span>
    <div style="margin-top: 3px;"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
  </div></td>
  <td align="left" valign="top"><div class="imgsublinks"><div class="sublinks">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></td>
  <td align="left" valign="top"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></td>
          </tr></table>
    </td></tr>
<!-- END forumrow -->

Et le CSS concerné :

Code:
    /** BLOC SOUS-FORUMS **/
.imgsublinks {
  width: 155px;
  height: 125px;
  background-image: url(http://i58.tinypic.com/iwsvvl.png);
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 1;
  transform: all;
  transition: 1s; }

.sublinks a:hover .imgsublinks {
  opacity: 0;
  transform: all;
  transition: 1s; }

.sublinks {
  width: 155px;
  height: 125px;
  font-size: 0px;
  text-align: left; }

.sublinks a {
  display: block;
  font-weight: normal; }

Ce que j'ai déjà essayé :
- inverser la classe de l'image et celle du bloc liens au niveau du Template
- séparer carrément les deux div (toujours au niveau du Template) et changer la position du bloc lien dans le css pour que les deux se superposent

Le seul résultat concret que j'ai pu obtenir c'est le changement d'opacité de l'image mais au survol de l'image uniquement (et pas des liens, donc). Il semblerait même que le bloc lien positionné au dessus de l'image "bloque" le survol tout court. Bref je suis un peu à court d'idées et un peu d'aide ne serait pas de refus ^^" Voici l'adresse du forum (en hide) pour mieux visualiser ce que je veux dire :
Et merci encore à celui qui me trouvera la solution x)


Dernière édition par Daewyn le Dim 3 Aoû 2014 - 0:26, édité 1 fois

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

http://dae-test-fantasia.forumactif.org/
Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par stefou le Lun 28 Juil 2014 - 8:47

Bonjour,
je regarde le hide  Shocked 

stefou
*****

Masculin
Messages : 889
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par stefou le Lun 28 Juil 2014 - 10:57

Après avoir passé du temps à comprendre ce que vous souhaitez, je m’aperçois que le code donné n'est pas en place, donc je le met en place et je constate que votre soucis est résolu ?


stefou
*****

Masculin
Messages : 889
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par Daewyn le Lun 28 Juil 2014 - 14:01

En fait non (j'ai juste testé une solution alternative en attendant au cas où je n'obtiendrai pas de réponse).

Le code que j'ai mis en place est celui d'une deuxième image au survol ; ce que j'aimerais éviter puisque ça m'empêche de jouer avec les effets de transition et qu'en plus je n'arrive toujours pas à appliquer l'effet au survol des liens uniquement. Mon problème est donc toujours d'actualité ^^ Je vais remettre le code précédent Wink Merci en tout cas de t'intéresser à mon cas ^^

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

http://dae-test-fantasia.forumactif.org/
Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par Daewyn le Mar 29 Juil 2014 - 15:18

Up.

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

http://dae-test-fantasia.forumactif.org/
Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par Daewyn le Mer 30 Juil 2014 - 21:47

Up !

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

http://dae-test-fantasia.forumactif.org/
Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par stefou le Jeu 31 Juil 2014 - 11:21

Bonjour,
J'arrive à supprimer l'image au survol des liens mais je cherche encore pour la transition...

Je ne t'oublie pas  Very Happy 

stefou
*****

Masculin
Messages : 889
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par Daewyn le Jeu 31 Juil 2014 - 16:47

Super, merci =) Oui j'avoue que je ne comprends pas pourquoi je n'arrive pas à réaliser cet effet alors que c'est pas le plus compliqué au monde... xx" Merci encore en tout cas ^^

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

http://dae-test-fantasia.forumactif.org/
Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par stefou le Jeu 31 Juil 2014 - 16:58

Je pense qu'il s'agit de hiérarchie dans les div.
Mais comme html c'est pas mon fort je tâtonne et je peaufine avec du javascript

Tu souhaites un opacity 0 au survol ?

stefou
*****

Masculin
Messages : 889
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par Daewyn le Jeu 31 Juil 2014 - 17:00

Non, plutôt du 0.5 (je testais en 0 pour voir si ça marchait). J'ai aussi pensé à un soucis de hiérarchie mais pareil, même en changeant l'ordre j'arrivais à rien >< Je vais aussi essayer de refaire quelques essais de mon côté.

EDIT : après un nouvel essai, une avancée... ou pas. J'ai changé le code html dans le Template de cette façon (afin de résoudre le problème de hiérarchie) :

Code:
<td align="left" valign="top"><div class="conteneur" style="width: 155px; height: 125px;">
    <div class="imgsublinks" style="width: 155px; height: 125px;"></div>
    <div class="sublinks">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  </div></td>

Et le css associé :

Code:
    /** BLOC SOUS-FORUMS **/
.conteneur {
  position: relative; }

.imgsublinks, .sublinks {
  position: absolute;
  top: 0;
  left: 0; }

.imgsublinks {
  background-image: url(http://i58.tinypic.com/iwsvvl.png);
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0.5;
  transform: all;
  transition: 1s; }
 
.sublinks:hover .imgsublinks {
  opacity: 0;
  transform: all;
  transition: 1s; }
 
.sublinks {
  font-size: 0px;
  text-align: left;
  z-index: 10; }
 
.sublinks a {
  display: block;
  font-weight: normal; }

.sublinks a:before {
  content: "» "; }

Résultat : Si je fais un ".imgsublinks:hover", tout marche bien, l'effet d'opacité progressive s'applique correctement. Mais dès que je change pour un ".sublinks:hover .imgsublinks" ou un ".sublinks a:hover .imgsublinks" (donc en théorie, que l'effet s'applique au survol de la "zone" des liens ou du lien lui même), là ça ne marche plus du tout. C'est donc là que doit se situer le problème mais je ne vois pas trop quoi mettre à la place >_o Je réessaierai d'autres choses ce soir ><

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

http://dae-test-fantasia.forumactif.org/
Daewyn a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème de changement d'opacité au survol

Message par stefou le Ven 1 Aoû 2014 - 9:27

Bonjour,
Voilà cette fois ci je le tien  Smile 

Ajoute un javascript coché sur index
Code:
$(document).ready(function(){
$(".sublinks").hover(function(){$(this).parent().addClass("hover");//au survol ajoute la class hover
},function(){
  $(".conteneur").removeClass("hover");//retire la class hover à la sortie du survol
});
});
Ce js ajoute au survol de sublinks la class "hover" aux parents direct du sublinks survolé --> conteneur
ensuite il retire la class "hover" lorsque l'ont quitte le survol de sublinks

et dans la css
Code:
.conteneur.hover .imgsublinks{opacity: 0!important;}

Tu peux nettoyer ton css sur le ou les ":hover" et "opacity" que tu as placé ultérieurement mais je pense que tu dois laisser les effets de transition

stefou
*****

Masculin
Messages : 889
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par Daewyn le Sam 2 Aoû 2014 - 23:10

Merci pour ta solution stefou, je ne l'ai pas encore testée (je ne pourrais que demain) mais je te dirais ^^

Par contre même si ça marche, j'aimerais savoir si ça reste possible à réaliser via CSS uniquement ?? Si tu sais Wink Ou sinon j'attendrai de voir si on peut me renseigner là dessus avant de mettre en résolu ^^ Merci encore en tout cas pour ton aide =)

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

http://dae-test-fantasia.forumactif.org/
Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par stefou le Sam 2 Aoû 2014 - 23:26

J'ai utilisé le je pour jouer avec les class car sans quoi au survol d'un lien l'effet ce répercute sur tous les imgsublikns.
Maintenant je pense que c'est réalisable si tu solutionne l'hiérarchie dans les div.
Il faut que sublinks soit le parent de imgsublikns hors pour le moment ils sont un truc du genre frères.


Dernière édition par stefou le Dim 3 Aoû 2014 - 8:09, édité 1 fois

stefou
*****

Masculin
Messages : 889
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par Daewyn le Sam 2 Aoû 2014 - 23:51

Hum, le soucis c'est que avec sublinks parent de imgsublinks au niveau des div (template), ça donne
- soit ça : "<div class="conteneur" style="width: 155px; height: 125px;"><div class="sublinks"><div class="imgsublinks"></div>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>"

- soit ça : "<div class="conteneur" style="width: 155px; height: 125px;"><div class="sublinks">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<div class="imgsublinks"></div></div></div>"

Et au final un résultat absolument ingérable niveau rendu / positionnement >_o (je viens d'essayer et c'est pas fameux ^^") Ou alors j'ai foiré quelque chose ><

EDIT : bon du coup j'en ai finalement profité pour tester ta solution qui marche à merveille ^^ Merci infiniment *-* Je note le sujet en résolu, pas la peine de m'échiner à le faire via css si ça marche aussi bien en js x) Et merci encore ! Wink

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

http://dae-test-fantasia.forumactif.org/
Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de changement d'opacité au survol

Message par stefou le Dim 3 Aoû 2014 - 8:17

J'avais tester au niveau du CSS et comme tu dis c'était difficilement gerable...
C'est pourquoi je me suis tourné vers du js.

stefou
*****

Masculin
Messages : 889
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou 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