Hover at anchor and icon

Asked

Viewed 34 times

-4

Each item on my list has an icon on the front, but, Hover doesn’t work for both at the same time. When I hover over the icon, 'text' accompanies the Hover effect, but when I step into 'text' the icon does not follow the effect. what may be causing this and how can I resolve it?

.nav-container {
  max-width: 1200px;
  width: 100%;
  position: relative;
  top: 5px;
}

.nav-container ul {
  float: right;
  height: 100px;
  line-height: 100px;
  margin: 0;
}

.nav-container li {
  list-style: none;
  float: left;
  padding-left: 10px;
  margin-right: 100px;
  margin-left: 30px;
  position: relative;
}

.nav-container li a {
  text-decoration: none;
  color: #111;
  transition: .2s;
}

.nav-container li a:hover {
  color: #0068AF
}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<nav class="nav-container">
  <ul>
    <li><a href="#"><i class="fa fa-user fa-lg" aria-hidden="true"></i> texto </a></li>
    <li><a href="#"><i class="fa fa-shopping-basket fa-lg" aria-hidden="true"></i> texto </a></li>
  </ul>

html css css3 css-hover
  • 2

    See the example in the question itself. The reported problem does not occur.

1 answer

-2

It might be something in the rest of your styles that’s going over this one, because only this piece of code is working the way you want it to

Browser other questions tagged html css css3 css-hover

You are not signed in. Login or sign up in order to post.