28172 sujets

CSS et mise en forme, CSS3

CSS dans le corps du code HTML : masquer ou afficher au survol

Bonjour à tous,

Je ne sais pas si j'ai été clair dans le sujet mais voici mon problème. Je fais un site vitrine via WIX (ne me jetez pas des pierres) par soucis de simplification.

Sur ancien site, j'ai fait une FAQ dans laquelle en survolant la question la réponse apparaissait dessous (bref le principe d'un menu déroulant). Wix ne donne pas accès à une feuille de style. La solution pourrait venir de l'insertion du Css dans le code html comme l'exemple ci-dessous
<div style="background-color:orange; border:1px solid black; color:yellow; font-size:150%; padding:1em;"> Cette balise div a du style !</div>


Je n'arrive malheureusement pas à adapter les display dans l'exemple ci-dessous
<li>La question ?
    <ul>
      <li>La réponse</li>
    </ul>
  </li>
Salut,

Je ne suis pas un fin connaisseur de Wix, mais j'ai l'impression que l'on peut insérer du code HTML personnalisé dans ta page.
Du coup du peut positionner ce bloc avant ton contenu (une "application HTML" selon leur terme) et peut sans doute contenir uniquement une balise <style type="text/css"></style>.

Tu peux donc tenter d'insérer un bloc de ce type contenant le code suivant :
<style type="text/css">
  li > ul > li{
    color: red;
  }
</style>

Tu testes et tu reviens pour savoir si ça fonctionne, ensuit on verra pour le survol.
Modifié par MatthieuR (03 Apr 2016 - 21:34)
Merci MatthieuR pour votre participation.

Vous avez tout à fait raison sur l'insertion d'un code HTML dans WIX et justement j'en étais à cet étape.

C'est exactement ce que je cherchais ! Un grand merci.

J'ai donc réussi à compléter moi même puisque je l'avais déjà fait en feuille de style séparée. 

<style type="text/css">
  li > ul > li{
    display: none;;
  }
li:hover .Submenu {
    display: block;
}


Encore merci Matthieu et bonne soirée à tous Smiley cligne
Modifié par pascal92140 (03 Apr 2016 - 22:08)
Ok, c'est cool si ça fonctionne.
Je pense cependant qu'il faudrait plutôt masquer le <ul> que le <li>.
Egalement, attention au comportement sur écran tactile, l'émulation du hover est très différent suvent les devices et navigateurs.
Ok Matthieu pour <ul> vs <li>. De toutes les façons je vais faire des essais sur différents supports avant.

Bonne soirée et merci encore
Sujet clos
Aller à