1
votes

Chez Hover, comment changer la couleur d'une image et d'un texte simultanément qui sont dans un seul div?

Je veux que ces images et légendes changent de couleur en survol mais pas séparément, mais quand on clique sur le texte, l'image doit également changer la couleur. Pas le fond mais la couleur de ces liens texte et images Voici mon code:

.whitenavigation{
     margin-left:auto;
     margin-right:auto;
     width:1080px;
     height: 100px;
     background-color: white;
}
 .navicon{
     vertical-align: top;
     display: inline-block;
     text-align: center;
     margin-top: 14px;
     margin-left: 50px;
}
 .navicon img{
     width:30px;
     height: 30px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.navicon img:hover{
    -webkit-filter: grayscale(100%);
    filter: grayscale(0%);
    cursor: pointer;
    }
 .caption {
     display: block;
     color: black;
}
 .navicon a:hover {
     color:#e96803;
}
 .navicontext{
     margin-top: 10px;
     float: right;
}`

Voici le code css que j'ai appliqué et essayé d'obtenir des reslts. J'ai changé de couleur en survolant le texte et les images différemment. Pour les images, j'ai utilisé la propriété en niveaux de gris de css. Cela fonctionnera lorsque nous survolons les images, mais pour le texte, nous devons survoler séparément. Je veux qu'ils changent à la fois:

<div class="whitenavigation">
      <nav class="navicontext">
        <div class="navicon">
          <img src="img/Icons/1.PNG" alt="PROGRAMMES">
          <a class="caption" href="#">PROGRAMMES</a>
        </div>
        <div class="navicon">
          <img src="img/Icons/2%20.PNG" alt="Faculty">
          <a class="caption" href="#">FACULTY</a>
        </div>
        <div class="navicon">
          <img src="img/Icons/3%20.PNG" alt="Faculty">
          <a class="caption" href="#">RESEARCH</a>
        </div>
        <div class="navicon">
          <img src="img/Icons/4%20.PNG" alt="Faculty">
          <a class="caption" href="#">ABOUT US</a>
        </div>
        <div class="navicon">
          <img src="img/Icons/5%20.PNG" alt="Faculty">
          <a class="caption" href="#">ADMISSION</a>
        </div>
        <div class="navicon">
          <img src="img/Icons/6.PNG" alt="Faculty">
          <a class="caption" href="#">CONTACT US</a>
        </div>
      </nav>
    </div>

html css image colors hover

1 commentaires

comment changer la couleur d'une image?

3 Réponses :

-1
votes

Utilisez-le dans un fichier CSS. cela devrait fonctionner

.navicon, caption: hover{
// your color changing CSS
}

5 commentaires

Non, cela ne change pas la couleur du texte ou de l'image. Mais lorsque j'applique un changement de couleur d'arrière-plan, cela changera tout l'arrière-plan div. Je souhaite modifier uniquement le texte et la couleur de l'image simultanément

@KashifKhalid puis essayez de remplacer .whitenavigation: hover {} par .navicon, .caption: hover {}

@KashifKhalid j'ai mis à jour la réponse, veuillez jeter un coup d'œil. Veuillez voter pour cette réponse ou l'accepter comme réponse Si cela vous aide ou fonctionne pour vous.

où partager?

vous pouvez le partager dans votre question elle-même

0
votes

Vous pouvez utiliser le survol en css pour changer facilement la couleur d'arrière-plan des divs. Voici le code de ce que j'ai fait.

Lien vers CodePen

<div class="whitenavigation">
      <nav class="navicontext">
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="PROGRAMMES" width=150 >
          <a class="caption" href="#">PROGRAMMES</a>
        </div>
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="Faculty" width=150 >
          <a class="caption" href="#">FACULTY</a>
        </div>
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="Faculty" width=150 >
          <a class="caption" href="#">RESEARCH</a>
        </div>
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="Faculty" width=150 >
          <a class="caption" href="#">ABOUT US</a>
        </div>
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="Faculty" width=150 >
          <a class="caption" href="#">ADMISSION</a>
        </div>
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="Faculty" width=150 >
          <a class="caption" href="#">CONTACT US</a>
        </div>
      </nav>
    </div>

.navicon{
  float:left;
  padding:5px;
  margin:5px;
  transition: 0.4s;
}

.navicon:hover{
  transition: 0.4s;
  background-color:orange;
}
.caption{
  display:block;
  text-align:center;
  text-decoration:none;
}

6 commentaires

Merci pour votre temps @ S.Ruka mais je ne voulais pas changer l'arrière-plan de ces images de pomme. Je veux changer la couleur de cette image. En fait, j'utilise des images png comme des icônes pour ma barre de navigation et lorsque je passe la souris dessus, je veux que ces icônes deviennent orange avec du texte en même temps qui se trouve juste en dessous de l'icône.

vous voulez dire pour les icônes avec un fond transparent. Droite?

J'ai mis à jour l'extrait de code. Veuillez vérifier si c'est ce que vous voulez.

L'icône Bro est toujours noire. Pouvez-vous changer cette icône du noir à l'orange pas l'arrière-plan

Que faire si vous rendez l'arrière-plan de l'image blanc et la zone de l'icône transparente Ensuite, lorsque vous changez la couleur de l'arrière-plan, la couleur de l'icône change

ou vous pouvez prendre une image au format svg. si c'est le cas, vous pouvez facilement changer la couleur de l'icône.

0
votes

Changez votre css en survolant l'élément parent

<div class="whitenavigation">
      <nav class="navicontext">
        <div class="navicon">
         <img src="https://img.icons8.com/color/64/000000/name.png">
          <a class="caption" href="#">PROGRAMMES</a>
        </div>
        <div class="navicon">
          <img src="https://img.icons8.com/color/48/000000/edit.png">
          <a class="caption" href="#">FACULTY</a>
        </div>
        <div class="navicon">
          <img src="https://img.icons8.com/color/48/000000/synchronize.png">
          <a class="caption" href="#">RESEARCH</a>
        </div>
        <div class="navicon">
          <img src="https://img.icons8.com/color/48/000000/picture.png">
          <a class="caption" href="#">ABOUT US</a>
        </div>
        <div class="navicon">
          <img src="https://img.icons8.com/color/48/000000/opened-folder.png">
          <a class="caption" href="#">ADMISSION</a>
        </div>
        <div class="navicon">
          <img src="https://img.icons8.com/color/48/000000/services.png">
          <a class="caption" href="#">CONTACT US</a>
        </div>
      </nav>
    </div>

.whitenavigation{
     margin-left:auto;
     margin-right:auto;
     width:1080px;
     height: 100px;
     background-color: white;
}
 .navicon{
     vertical-align: top;
     display: inline-block;
     text-align: center;
     margin-top: 14px;
     margin-left: 50px;
}
 .navicon img{
     width:30px;
     height: 30px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.navicon:hover img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(0%);
    cursor: pointer;
    }
 .caption {
     display: block;
     color: black;
}
 .navicon:hover a {
     color:#e96803;
}
.navicontext{
     margin-top: 10px;
     float: right;
}

.navicon:hover img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(0%);
    cursor: pointer;
}
.navicon:hover a {
     color:#e96803;
}

2 commentaires

Merci beaucoup @Hiren Vaghasiya, votre code a bien fonctionné et maintenant mon problème est résolu et vous êtes mon premier assistant sur StackOverflow :)

@KashifKhalid Bienvenue Mate