#html #css #reactjs #hover #navbar
Вопрос:
как я могу сделать такой эффект наведения на вертикальную навигационную панель? 
Я не смог найти никакой информации,если вы знаете,где я могу прочитать об этом, дайте мне ссылку, пожалуйста!
Код:
//imagine it is html with classes (.LogosContainer,.Logo) lt;LogosContainergt; lt;Logo src={iconHome} alt="home" /gt; lt;Logo src={iconGlobe} alt="globe" /gt; lt;Logo src={iconArchive} alt="archive" /gt; lt;Logo src={iconPieChart} alt="pie-chart" /gt; lt;Logo src={iconDollarSign} alt="dollar" /gt; lt;Logo src={iconDatabase} alt="database" /gt; lt;Logo src={iconNavigation} alt="navigation" /gt; lt;/LogosContainergt; const Logo = styled.img` margin-bottom: 43px; amp;:last-child { margin-bottom: 0; } `; const LogosContainer = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; `; Комментарии:
1. Привет:) Что такое эффект наведения на самом деле? Левая белая кайма?
2. @Azu привет,да!
3. Не могли бы вы поделиться кодом компонента логотипа?
4. @Azu у меня было это в моем вопросе,см. Выше. lt;Логотип/gt; это стилизованный компонент,простой lt;Логотип/gt;lt;img/gt;
Ответ №1:
В вашем случае у вас есть изображение, я использовал здесь div. Поскольку я не знаю, как работать со стилизованными компонентами, я предоставляю вам использовать стили, которые я предоставляю:
.container { width: 100px; height: 100px; box-sizing: border-box; background-color: red; } .container:hover { border-left: 5px solid green; } lt;div class="container"gt; lt;/divgt; Ответ №2:
В файл стилей добавить:
/**color of your choice on hovering*/ Logo:hover{ background-color: yellow; }