Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Discussion générale openElement
  Nouveaux messages Nouveaux messages Fil RSS  - question de css
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Sujet ferméquestion de css

 Répondre Répondre
Auteur
Message
michelrigaud allez vers le bas
Newbie
Newbie


Depuis le: 12 Oct 2020
Status: Inactif
Points: 18
Lien Direct à ce Post Sujet: question de css
    Envoyé : 17 Oct 2020 à 21:30
bonsoir à tous,

dans un conteneur 'relative' je place une image et un texte. Je déclare dans un bloc de code source css l'opacité de l'image et du texte.

.txt{
 opacity:0;   
}
.img:hover{
 opacity:0;   
}

Je souhaiterais contrôler dans mon code css le fait que lorsque : (img est hover) alors (txt est opacity 1)
j'ai cherché, testé puis cherché encore mais rien n'y fait, j'y arrive pas...
ma question : est-ce possible de réaliser cette condition en css et si oui quelqu'un a-t-il la gentille réponse?

belle soirée à tous
Haut de la page
michelrigaud allez vers le bas
Newbie
Newbie


Depuis le: 12 Oct 2020
Status: Inactif
Points: 18
Lien Direct à ce Post Envoyé : 18 Oct 2020 à 00:28
pardon pour la question bête, j'ai trouvé tout seul la réponse en cherchant et réfléchissant :

id=WEb1 classe=img
id=WEt1 classe=txt

ça fonctionne et j'ai appris au passage que je ne peux pas prendre le contrôle d'une div contenu dans une div en relative si j'utilise sa classe au lieu de son id comme ici :

#WEt1 {
  opacity:0;
}
#WEb1:hover + #WEt1 {
  opacity:1;
}




Edité par michelrigaud - 18 Oct 2020 à 01:14
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 5600
Lien Direct à ce Post Envoyé : 18 Oct 2020 à 12:30
En fait c'était une question très valable.

Vous pouvez aussi utiliser transition pour adoucir le tout:

#WEt1 {
transition-duration: 1s;
opacity:0;
}
#WEb1:hover + #WEt1 {
opacity:1;
}


Edité par Hobby001 - 18 Oct 2020 à 12:47
Haut de la page
michelrigaud allez vers le bas
Newbie
Newbie


Depuis le: 12 Oct 2020
Status: Inactif
Points: 18
Lien Direct à ce Post Envoyé : 18 Oct 2020 à 14:20
merci, c'est plus agréable à l'oeil

par contre le css agit 6 fois dans la page, comme je m'adresse à l'id de la div, je dois répéter 6 fois ma séquence de code, c'est pas élégant ni plaisant à modifier.

une idée serait la bienvenue pour compacter le tout aussi pour ma culture du code css

Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 5600
Lien Direct à ce Post Envoyé : 18 Oct 2020 à 16:05
mais si ça fonctionne: https://denislafrance.net/pagetest.htm

.txtCss {
transition-duration: 1s;
opacity:0;
}
.imgCss:hover + .txtCss {
opacity:1;
}
Haut de la page
michelrigaud allez vers le bas
Newbie
Newbie


Depuis le: 12 Oct 2020
Status: Inactif
Points: 18
Lien Direct à ce Post Envoyé : 18 Oct 2020 à 16:40
ben je suis sans voix... c'est formidable, merci beaucoup!!!

chaque jour m'apporte le plaisir d'en savoir plus que la veille

Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Acheter votre vélo en ligne