Sujet Précédent Sujet Suivant

Survole de la souris css

Fermé
Henri - Modifié le 13 févr. 2021 à 14:38
 totoax - 15 févr. 2021 à 23:40
Bonjour,
Je suis en train de faire une page en html/css plutot basqiue, je souhaite faire une petite annimation quand un élement h1 et survoler. Un truc plutot basique que j'ai deja un certain nombre de fois.Seulement je ne sais pas pourquoi cette fois-ci.Cela ne fontionne pas 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link rel="stylesheet" href="../style/style.css">
  <script type="text/javascript" src="../style/app.js"></script>
  <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
  <link rel = "preconnect" href = "https://fonts.gstatic.com">
  <link href = "https://fonts.googleapis.com/css2? family = Kumbh + Sans: wght @ 200 & display = swap "rel ="stylesheet">
  <link rel = "preconnect" href = "https://fonts.gstatic.com">
  <link href = "https://fonts.googleapis.com/css2? family = Kumbh + Sans: wght @ 600 & display = swap "rel ="stylesheet">
  <title>FAQ</title>
</head>
<body>
  <div class="card">
    <div class="images">
      <img class="main-img"src="../images/illustration-woman-online-desktop.svg" alt="">
      <img class="box"src="../images/illustration-box-desktop.svg" alt="">
     
    </div>
    <div class="question-reponse">
        <h1>FAQ</h1>
        <div class="block">
          <div class="visible">
            <h1>How many team members can I invite?</h1>
            <img src="../images/icon-arrow-down.svg" alt="">
          </div>
          <p>You can invite up to 2 additional users on the Free plan. There is no limit on 
          team members for the Premium plan.</p>
        </div>
        <div class="block">
          <div class="visible">
          <h1>What is the maximum file upload size?</h1>
          <img src="../images/icon-arrow-down.svg" alt="">
        </div>
          <p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
       </div>
        <div class="block">
          <div class="visible">
          <h1>How do I reset my password?</h1>
          <img src="../images/icon-arrow-down.svg" alt="">
        </div>
          <p> Click “Forgot password” from the login page or “Change password” from your profile page.
          A reset link will be emailed to you.</p>
        </div>
        <div class="block">
          <div class="visible">
          <h1>Can I cancel my subscription?</h1>
          <img src="../images/icon-arrow-down.svg" alt="">
          </div>
          <p> Yes! Send us a message and we’ll process your request no questions asked.</p>      
        </div>
        <div class="block">
          <div class="visible">
          <h1>Do you provide additional support?</h1>
          <img src="../images/icon-arrow-down.svg" alt="">
        </div>
          <p>Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>


body{
    background: linear-gradient(hsl(273, 75%, 66%),hsl(240, 73%, 65%));
    background-attachment:fixed;
    font-family: 'Kumbh Sans', sans-serif;
}
.card{
    z-index:-1;
    display: block;
    position:relative;
    width: 750px;
    height: 400px;
    background-color: white;
    border-radius: 10px;
    margin-top:11%;   
    margin-left: auto;
    margin-right: auto;
    display: flex;
}
.images .main-img{
    height: 300px;
    width: auto;
    margin-top:50px;
    margin-left:-70px;;
}
.box{
    position: absolute;
    top: 150px;
    left:-130px;

}
.question-reponse{
    width: 420px;
    height: 400px;
}
.block{
    display: flex;
    flex-direction: column;
    width: 420px;
    height:50px;
    margin:5px;
}
.block .visible {
    display: flex;
}
.block .visible img {
    position: absolute;
    height: 10px;
    width: auto;
    margin-top: 15px;
    margin-left:350px;  
}
.block .visible img:hover {
    cursor: pointer;
    transform: rotateX(180deg);
    
}
.block h1{
    font-size: 15px;
    font-weight:100;
}
.block h1:hover{
    cursor: pointer;
    color:hsl(14, 88%, 65%);
    
}
.block p {
    opacity: 0;
    font-size: 13px;
    color:grey;
    position: absolute;
    /* margin-top:30px; */
}

quand la souris survole un élément H1 rien ne se passse pareil pour les images au passage...
J'ai relu et je n'arrive pas a voir ou ça bloque.
le probleme dois surement être tout à fait ridicule...
Pouvez m'aide pour ce petit probleme,
Merci d'avance!
Configuration: Windows / Chrome 88.0.4324.150

2 réponses

Réponse 1 / 2
Totoax
Modifié le 13 févr. 2021 à 21:00
Salut,
vos sélecteurs ne sont pas bon.
Il n'existe aucune classe .block sur une balise H1
D'ailleurs pourquoi plusieurs titres de niveaux 1? Vous pouvez aller jusqu'à H6 pour justement différencier des niveaux de titres et faire en sorte qu'un titre principal soit référencé en tant que tel, et donc affiner votre chapitrage/titrage des contenus.

éventuellement penser à utiliser une id qui sera plus claire à lire et rapide à écrire.
Pas non plus d'animation dans votre CSS mais vous déclarez un comportement au survol.

pour rappel sur les sélecteurs CSS
https://www.w3schools.com/cssref/css_selectors.asp

exemples d'animation (et non de changement au survol)
https://www.w3schools.com/css/css3_animations.asp

La hiérarchie des titres:
https://www.w3schools.com/tags/tag_hn.asp

Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.
0
Réponse 2 / 2
Henri
Modifié le 14 févr. 2021 à 18:27
bonjour,
merci pour la doc sur les animations.
j'ai changer les h1 par des paragraphes pour me facilité les choses... 
          
<div class="visible">
            <p>How many team members can I invite?</p>
            <img src="../images/icon-arrow-down.svg" alt="fleche">
      </div>

et donc dans le css.. 
.visible p{
    z-index: 1;
    color: black;
    font-size: 15px;
    font-weight:100;
}
.visible p:hover{
    cursor: pointer;
    color: orange;
}

toujour rien quand la souris survole le p contenu dans "visible"..
Auriez vous des solutions à m'opporter?
0
totoax
Modifié le 15 févr. 2021 à 23:59
Salut,
vous n'avez toujours pas compris comment fonctionne un sélecteur...
lisez mieux(et cliquer sur celui que vous voulez utilisez histoire d'avoir un exemple):

https://www.w3schools.com/cssref/css_selectors.asp

"j'ai changer les h1 par des paragraphes pour me facilité les choses..."
Simplifier sert pas à grand chose quand il s'agit s'écrire les éléments adéquats(ceux qui désignent le type de leur contenu(s))
Si ce sont des titres il doivent utiliser un header(h1 à h6).
Si ce sont des menus il est utile de l'indiquer(voir nav).
Il est souvent utilisé des listes non ordonnées car très facile à mettre en page en tant que tels et simple à lire dans le code.
Rien n'empêche éventuellement d'y inclure un header si ce sont des titres:
Un élément de menu étant un lien c'est lui qui doit contenir l'élément cliquable(balise "a").

Ce que vous appelez simplifier est juste une mauvaise(très) écriture(fausse).
Exemple d'un menu de navigation correct (uniquement pour le HTML): 


<nav>
 <ul>
   <li>
    <h2>titre premier item</h2>
    <a href="#lien1"><img src="url-mon-image" alt="" /></a>
   </li>
   <li>
    <h2>titre second item</h2>
    <a href="#lien2"><img src="url-mon-image1" alt="" /></a>
   </li>
 </ul>
</nav>
<!-- avec une ancre nommé(un lien interne  à la page, ce qui me semblait être le cas espéré) -->
 <h2 id="lien1">titre premier item</h2>
<p>blablabla 1</p>

 <h2 >titre premier item</h2>
<p id="lien2">blablabla 2</p>
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
bouton CPI sur ma souris
taz -
O.Mustapha -

16 réponses
Roulette de souris qui change le son ???
parasteur -
leo -

31 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
j'ai perdu la clé usb de la souris sans fils
enimarix -
titou337 -

1 réponse