[Résolu] Lié 1 image et un id pour faire un hover commun

Bonjour,
Je souhaite pour mon portfolio, lié une image et un gradient pour lorsqu'on survole l'un des deux, les deux se mettent en couleurs car le ils sont de bases en noir et blanc. J'utilise pour ça un tableaux (je ne sais pas si c'est la meilleur de idée).
Voilà mon code : https://codepen.io/hugodlmm/pen/zQJedM

<table>
  <tr>
    <div class="ai">
      <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Adobe_Illustrator_CC_icon.svg/788px-Adobe_Illustrator_CC_icon.svg.png"></td>
      <td id="ai"></td>
  </div>
  </tr>
</table>

body {
  background-color: #777;
}

#ai {
  background-image: linear-gradient(-90deg, #308831, #5AB75C);
  left: 0;
  margin-top: 30px;
  width: 200px;
  height: 10px;
  float: right;
  filter: grayscale(1) contrast(200%);
}

img {
  width: 75px;
  display: block;
  filter: grayscale(1) contrast(200%);
  margin: 5px 20px;
  transition-duration: 0.5s;
  float: left;
}

img:hover,#ai:hover {
  transition-duration: 0.5s;
  filter: grayscale(0) contrast(100%);
}

Modifié par hugodlmm (01 Jun 2019 - 19:01)

Bonjour,

non les tableaux n'ont plus vraiment d'intérêt autres que ceux de faire des tableurs. Apprend plutôt à utiliser flexbox.

Concernant ton hover, tu peux tout à fait mettre le :hover sur un élément parent comme ceci :

.ai:hover img, .ai:hover #ai {
transition-duration: 0.5s;
filter: grayscale(0) contrast(100%);
}

Il vaut mieux mettre une classe à la place de #ai car ton code va logiquement être utilisé plusieurs fois et il est invalide d'avoir plusieurs fois le même id dans le code. D'une manière générale évites les id pour faire du css.

Tu as des propriétés inutiles dans ton code comme left qui n'aurait de sens qu'avec un positionnement absolute.

J'ai repris ton pen :
https://codepen.io/bacasable/pen/GaPeGj

Bonjour,

si le table display t'importe, tu peut t'en servir sans forcement faire usage d'un tableau.

l'alignement vertical peut se faire au sein d'un element en display: table-cell/flex ou grid et entre des boite en ligne.

ton gradient, pourrait etre une balise <meter></meter> au lieu d'un div.

Enfin, pour que tes deux élément réagissent ensemble au hover de l'un ou l'autre, la première étape consiste à sélectionner le parent commun, puis d’empêcher ce parent de réagir au survol de la souris et de ne le rétablir que sur les enfants. à l'aide de pointer-events (si tu ne veut pas laisser javascript s'en charger). Dés que l'un des enfant perçoit le survol, le parent est aussi survolé.

ton code pourrait être modifier comme suit :

 <div class="ai">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Adobe_Illustrator_CC_icon.svg/788px-Adobe_Illustrator_CC_icon.svg.png">
    <meter id></meter>
  </div>

et les style

.ai {
  display:table; /* se retracte sur son contenu */
  pointer-events: none;/* insensible à la souris */
}
[id],
img {
  pointer-events: auto;/* sensible à la souris */
  filter: grayscale(1) contrast(200%);
  transition: 1s;
  vertical-align: middle;/* parceque boites en ligne */
}
[id] {
  background-image: linear-gradient(-90deg, #308831, #5ab75c);
  width: 200px;
  height: 10px;
}

img {
  width: 75px;
  margin: 5px 20px;
}
/* .ai:hover ne reagit que si l'un des enfant est survolé, du au  pointer-events reset */
.ai:hover img,
.ai:hover [id] {
  transition-duration: 0.5s;
  filter: grayscale(0) contrast(100%);
}

https://codepen.io/gc-nomade/pen/wbRbrw
Modifié par gcyrillus (02 Jun 2019 - 12:45)