Bonjour à tous. Dans le cadre d'un stage, je dois réaliser un site de vente pour une entreprise.

Pour pouvoir se connecter, il faut survoler une image (à ce moment là, une division apparaît), renseigner les champs et valider :

Cependant, les navigateurs enregistrant les mots de passe affichent par dessus des petits cadres proposant  de remplir automatiquement les champs. Mon problème est, que lorsqu'on survole ces cadres ajoutés par les navigateurs, la division disparaît.

Voici les propriétés de la-dite division :

#user_win {
  padding: 0.7em;
  visibility: collapse;
  border: 2px solid #bbb;
  position: absolute;
  right: 1.2em;
  top: 3.3em;
  background-color: #fff;
  border-radius: 2px;
  z-index: 1;
}

J'appelle mes division comme ceci :

<div id="user_win">
   <?php if ($_COOKIE['fname'] == 'unknown' || $_SESSION['fname'] == 'unknown') {
       include("parts/notlogged.php");
   } else {
       include("parts/logged.php");
   } ?>
</div>

Je reste disponible si besoin de code supplémentaire. Je prends également note de tous commentaires visant à éliminer les mauvaises choses présentes dans mon code.

Merci d'avance!

EDIT : j'ai oublié de montrer comment la gestion de l'affichage se fait.

#user_logo:hover #user_win {
  visibility: visible;
}

Bien évidemment, l'id #user_win est un descendant de l'id #user_logo

-
Edité par chocorean 12 juin 2018 à 11:45:07

Hello,

Le mieux serait d'afficher ta 'division" par clic et non un survol, d'autant que sur un écran tactile (mobile-tablette qui représente + de 50% de consultation le survol n'existe pas )

Et pourtant sur un écran tactile cela fonctionne ! Il suffit de cliquer dessus puis de déplacer son doigt sans le relever, ça positionne le curseur là où on a cliqué. Ainsi la division est visible Mais effectivement, je reconnais que ce n'est pas pratique.

Pour revenir au problème, je pense faire comme tu as indiqué, mais je serai curieux de savoir s'il existe une alternative à ce problème. En tous cas merci de ton aide !

-
Edité par chocorean 13 juin 2018 à 10:26:33