В Hover, как изменить цвет изображения и текста одновременно, которые находятся в одном div? - PullRequest
Новая
       26

В Hover, как изменить цвет изображения и текста одновременно, которые находятся в одном div?

0 голосов
/ 02 февраля 2019

Я хочу, чтобы эти изображения и подписи меняли цвет при наведении, но не по отдельности, но при нажатии на текстовое изображение также следует изменить цвет.Не фон, а цвет текста ссылки и изображений / Это мой код: 

<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>

Вот код CSS, который я применил и попытался получить reslts.Я изменил цвет при наведении на текст и изображения по-разному.Для изображений я использовал свойство оттенков серого css.Это будет работать, когда мы наведем курсор на изображения, но для текста мы должны зависать отдельно.Я хочу, чтобы они одно время менялись: 

.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;
}`

Ответы [ 3 ]

0 голосов
/ 02 февраля 2019

Вы можете использовать hover в css, чтобы легко менять цвет фона div.Вот код для того, что я сделал.

Ссылка на CodePen 

.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;
}
<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>
0 голосов
/ 02 февраля 2019

Изменить ваш CSS при наведении на родительский элемент 

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


.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;
}
<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>
0 голосов
/ 02 февраля 2019

Используйте его в файле CSS.это должно работать 

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