Как изменить цвет значка шрифта внутри карты при наведении курсора? - PullRequest
Новая
       14

Как изменить цвет значка шрифта внутри карты при наведении курсора?

0 голосов
/ 12 января 2019

У меня есть страница с множеством загрузочных карт. При наведении курсора на карту я хочу, чтобы цвет значка был белым, а не черным. Я пробовал разные методы, но не смог добиться успеха. Я добавил класс, например .fa-calendar: hover, я попытался с помощью fa: hover, но не смог добиться успеха

Это мой кодовый блок

https://codepen.io/anon/pen/EGOgMq

<section>
<div class="container">


        <div class="row mbr-justify-content-center">

            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-volume-up fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Stay <span>Successful</span></h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-calendar fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Create
                            <span>An Effective Team</span>
                        </h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-globe fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Launch
                            <span>A Unique Project</span>
                        </h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-trophy fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Achieve <span>Your Targets</span></h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>




        </div>

</div>

</section>

Ответы [ 3 ]

0 голосов
/ 12 января 2019

Если вы хотите, чтобы цвет всех значков был одинаковым при наведении, вы можете использовать имя класса

Пример: 

.wrap:hover .fa{
  color:red;
  }

В противном случае вы можете использовать идентификатор, а затем изменить цвет 

.wrap:hover #vol{
  color:red;
  }
0 голосов
/ 12 января 2019

Это из-за цвета, который вы установили для .mbr-iconfont

.mbr-iconfont {
  font-size: 4.5rem !important;
  color: #313131;
  margin: 1rem;
  padding-right: 1rem;
}

при наведении указателя мыши на каждый прямоугольник основным родительским элементом, который получает: hover, является класс .wrap. Вы не можете изменить цвет .mbr-iconfont:hover, потому что пользователь может навести курсор на другие части поля (например, текст, заголовок или поля ...). Итак, вы должны установить свой стиль наведения для родительского элемента .wrap следующим образом: 

.wrap:hover .mbr-iconfont {
  color: #FFF;
}

Вот обновленная * Pen ссылка 1012 *

0 голосов
/ 12 января 2019

Чтобы быть более конкретным, вы можете навести курсор на имя класса. Вам нужно свойство hover и после этого добавьте имя класса. 

.wrap:hover .fa{
 color:#FFF;
}
...