Problème de changement d'opacité au survol

[Daewyn]

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)

[stefou]

Bonjour,
je regarde le hide   

[stefou]

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 ?

[Daewyn]

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 Merci en tout cas de t'intéresser à mon cas ^^

[Daewyn]

Up.

[Daewyn]

Up !

[stefou]

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

Je ne t'oublie pas   

[Daewyn]

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 ^^

[stefou]

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 ?

[Daewyn]

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

[stefou]

Bonjour,
Voilà cette fois ci je le tien   

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

[Daewyn]

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 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 =)

[stefou]

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.

[Daewyn]

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 !

[stefou]

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.