Imprimer la Page | Close Window

question de css

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Discussion générale openElement
Description du Forum: Discussion générale sur le logiciel
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=23964
Date: 01 Nov 2020 à 01:27
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: question de css
Posté par: michelrigaud
Sujet: question de css
Posté le: 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



Réponses:
Posté par: michelrigaud
Posté le: 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;
}




Posté par: Hobby001
Posté le: 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;
}


-------------
https://www.denislafrance.net" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.


Posté par: michelrigaud
Posté le: 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



Posté par: Hobby001
Posté le: 18 Oct 2020 à 16:05
mais si ça fonctionne:  http://denislafrance.net/pagetest.htm" rel="nofollow - https://denislafrance.net/pagetest.htm

.txtCss {
transition-duration: 1s;
opacity:0;
}
.imgCss:hover + .txtCss {
opacity:1;
}


-------------
https://www.denislafrance.net" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.


Posté par: michelrigaud
Posté le: 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




Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk