Как мне при наведении на контейнер character-container менялся цвет svg()?

Question

@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon.woff2") format("woff2"),
       url("./Flaticon.woff") format("woff"),
       url("./Flaticon.ttf") format("truetype"),
       url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: Flaticon;
    font-size: 40px;
    font-style: normal;
}

.flaticon-rocket:before { 
    content: "\f100";
}

.flaticon-null:before { 
    content: "\f101";
     }
.flaticon-support:before { 
    content: "\f102";
     }
   

.image-character-container{
    display: flex;
}

.characters-container h1{
    line-height: 1.5;
}

.character-container h4{
    font-weight: bold;
}


.character-container h5{
    word-wrap:
}

.character-container{
    margin: 16px;
}

.introduction-container{
    display: flex;
    align-items: center;
}

.image-container{
    display: flex;
    justify-content: center;
}

.icon-container{
    margin: auto;
}

.character-container:hover{
    cursor: pointer;
}

.character-container:hover i:before {
    color: #FF00FF;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Training Project</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/font/flaticon.css">
</head>
<body>
<div class="container">
        <div class="row">
            <div class="characters-container col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <h1>Хотите стать экспертом в области IT?</h1>
                <div class="image-character-container">
                    <div class="icon-container">
                        <i class="flaticon-null" style="width: 40px;"></i>
                    </div>
                    <div class="character-container">
                        <h4>Широкоформатное развитие</h4>
                        <h5>Проводим дополнительные практические занятия, связанные с развитием мышления, памяти и внимания</h5>
                    </div>
                </div>
                <div class="image-character-container">
                    <i class="flaticon-rocket"></i>
                    <div class="character-container" style="margin-top: 0;">
                        <h4>Конкретный результат</h4>
                        <h5>Создадим реальные проекты, которые можно добавить в портфолио</h5>
                    </div>
                </div>
                <div class="image-character-container">
                    <i class="flaticon-support"></i>
                    <div class="character-container" style="margin-top: 0;">
                        <h4>Много практики</h4>
                        <h5>Решение реальных задач, с которыми сталкивается каждый разработчик</h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 image-container">
                <img src="../assets/img/teach_img.jpg" style="box-shadow: 0px 25px 80px 0px rgba(15, 14, 77, 0.3);">
            </div>
        </div>
    </div>
 </body>
 </html>

БЛОГ НА HUSL

Как мне при наведении на контейнер character-container менялся цвет svg()?

Ответы (0 шт):