Une opacité qui ne change pas lors d'un hover

Malgré une transition

Le problème exposé dans ce sujet a été résolu.

C’est parce que les deux boutons sont l’un sur l’autre, puisque j’ai forcé le placement dans la grille de tous les éléments de classe button.

Il faut enlever la mise en grille (display:grid), et tant qu’à faire tout ce qui en dépend et ne sert plus à rien (justify-self, grid-*). Il n’y a même plus besoin du .container ni du .content en fait !

Je te conseille de nettoyer au max et de ne garder que ce qui est absolument nécessaire. Tout élément ou propriété CSS en plus ajoute potentiellement des problèmes à régler plus tard. Par exemple tu as tendance à mettre width:100% et height:100%, a priori en l’état actuel du CSS ça n’a pas d’effet visuel ni forcément de sens, donc autant ne pas s’encombrer.

+1 -0

Salut Ixnv,

Cela ne fonctionne plus :'(

Mon code :

.button
{
	justify-self: start;
	grid-row: 2;
	grid-column: 1;
}


.curtain
{
	position:fixed;
	z-index: -1;
	background-image: url(./images/Attention.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.3;
	width: 100vw;
	height: 100vh;
}

.button:hover + .curtain
{
	opacity: 1;
}
</style>
<body>
<div class="container">
  <div class="content">
    <h1>titre</h1>
    <p>contenu, bla bla</p>
  </div>
  <button class="btn btn-success">change fond</button><div class="curtain"></div> <button class="btn btn-warning">ne change rien</button>

</div>

et le .curtain étant après le 1er btn, l’image n’est pas en mode cover :(

Merci pour ton aide,

P.

+0 -0

On doit pouvoir bricoler quelque chose avec une grille, dans le style de ce que je t’avais montré avant… Un élément qui serait placé exactement par-dessus le h1, soit avec une copie du texte (beurk) soit avec une bidouille à base de backdrop-filter.

Mais c’est quoi le contexte ? Pourquoi tu tiens tant à tordre les possibilités du CSS ?

+1 -0

Salut Ixnv :)

Mais c’est quoi le contexte ? Pourquoi tu tiens tant à tordre les possibilités du CSS ?

Surement parce que je suis tordu ;)

Sur mon travail précédent, tout est top. Mon titre noir est super lisible sur le fond opacity 0.3.

Mais lorsque l’image de fond apparaît à opacity 1, le titre n’est plus lisible (image de fond foncée).

J’ai regardé backdrop-filter que je ne connaissais pas, je vois mal comment faire :B

Bon dimanche et merci.

P.

+0 -0

Mais c’est quoi le contexte ? Pourquoi tu tiens tant à tordre les possibilités du CSS ?

Surement parce que je suis tordu ;)

PaulLoupSulitzer

Ce que je veux dire, c’est que c’est très positif à mon avis de se limiter à CSS, mais que pour faire des choses secondaires, si ça devient du bricolage infâme, à un moment il est quand même plus propre de passer à JavaScript !

Continuer de s’obliger à n’utiliser que CSS dans ce contexte a plusieurs intérêts :

  • pour s’amuser ;
  • pour apprendre.

Mais si les solutions qu’on te propose sont trop compliquées pour que tu puisses te les approprier vraiment, je n’ai pas l’impression que ça rentre dans un des deux cas ! Il te serait beaucoup plus utile de chercher à comprendre comment fonctionne le sélecteur .button:hover + .curtain, ou apprendre à utiliser les grilles ! (Ou les bases de JS…)

Sans le contexte, je ne peux pas t’aider efficacement.

+0 -0

Attention aux raccourcis @lxnv, surtout en parlant à des débutants : le JS n’est pas fait pour remplacer le CSS, mais pour modifier le DOM en fonction d’entrées utilisateur.

Ce qui est demandé ici m’a l’air faisable en CSS, mais ça implique peut-être de modifier le HTML pour simplifier les sélecteurs, ou d’utiliser des sélecteurs plus nouveaux (avec un support potentiellement réduit à court terme).

Mais avant de s’engager dans des projets complexes, il faut s’assurer d’avoir les bases @PaulLoupSulitzer, notamment comme le dit @lxnv de comprendre les sélecteurs CSS ;)

+0 -0

Bonjour,

Ce qui est demandé ici m’a l’air faisable en CSS, mais ça implique peut-être de modifier le HTML pour simplifier les sélecteurs, ou d’utiliser des sélecteurs plus nouveaux (avec un support potentiellement réduit à court terme).

Puis-je en savoir plus viki53 ? J’avoue avoir cherché comment faire mais :B

Nouveaux sélecteurs ?

Merci pour ton aide,

P.

+0 -0

Bon, c’est trop compliqué pour moi :B

J’ai décidé de jouer avec le blur plutôt que l’opacity, donc plus la peine de changer de couleur :D

Donc je mets résolu ;)

Par contre, un petit souci qui ne mérite pas d’ouvrir une discussion, j’ai un problème de script que je ne m’explique pas.

Je suis parti de ce jsfiddle :

mais le script est inactif chez moi :

<script type="text/javascript">
var btnBack = document.querySelector('.js-history');

btnBack.addEventListener('click', function () {
  window.history.back();
});</script>

	</body>

le "code couleur" n’est pas bon :(

Bonne soirée ;)

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte