First-Hild and Hover operation

Asked

Viewed 53 times

1

I have a TOP and I would like that on the first li, in the case of the soon, don’t have the edge, when I pass the mouse on top. Already in others yes.

I tried with the following CSS and could not.

.topoMenu li a:first-child:hover {
    border-color: transparent;
}


.topoMenu li {
    font: 20px/20px "DINProLight";
    color: #fff;
    float: left;
    margin-right: 17px;
    margin-top: 44px;
}
.topoMenu li > img {
    margin-right: 45px;
}
.topoMenu li a {
    display: inline-block;
    cursor: pointer;
    padding-bottom: 11px;
    position: relative;
    z-index: 2;
    border-bottom: 2px solid transparent;
    margin-top: 10px;
}
.topoMenu li:first-child {
    margin-right: 95px!important;
    padding-bottom: 0;
    border-bottom: 0 solid transparent;
    margin-top: 45px;
}
.topoMenu li a:first-child:hover {
    border-color: transparent;
}
.topoMenu li:last-child {
    margin-right: 0;
    margin-top: 45px!important;
}
.topoMenu li a > span {
    display: inline-block;
    margin-top: 6px;
}
.topoMenu li a:hover {
    border-color:#d3d5db;
}
.topoMenu li:first-child + li + li + li + li + li + li a:hover{
    border-color: transparent;
}
.topoMenu li span {
    font: 20px/20px "DINProLight";
    color: #FFF;
}
<li>	
  <a href="/home">
    <img src="imagens/neomot_logo.png" height="35" width="195" alt="" />
  </a>
</li>
<li>	
  <a href="/empresas">
    <span>empresa</span>
  </a>    
  <div class="topoMenuBarra"></div>
</li>
<li>	
  <a href="/noticias">
    <span>noticias</span>
  </a>    
  <div class="topoMenuBarra"></div>
</li>
<li>	
  <a href="/trabalhe-conosco">
    <span>trabalhe conosco</span>
  </a>
  <div class="topoMenuBarra"></div>
</li>

css

1 answer

2


I took advantage of your code and made some changes to it. Take a look if it meets your need.

.topoMenu{margin: 0; padding: 0; list-style: none;}

.topoMenu li {
    font: 20px/20px "DINProLight";
    color: #fff;
    float: left;
    margin-right: 17px;
    margin-top: 44px;
}
.topoMenu li > img {
    margin-right: 15px;
}
.topoMenu li a {
    display: inline-block;
    cursor: pointer;
    padding-bottom: 11px;
    position: relative;
    z-index: 2;
    border-bottom: 2px solid transparent;
    margin-top: 10px;
}
.topoMenu li {
    border-bottom:3px solid transparent;
}
.topoMenu li:hover {
    border-bottom:3px solid red;
}
.topoMenu li:first-child:hover {
    border-color:transparent;
}
.topoMenu li:last-child {
    margin-right: 0;
    margin-top: 45px!important;
}
.topoMenu li a > span {
    display: inline-block;
    margin-top: 6px;
}
.topoMenu li span {
    font: 20px/20px "DINProLight";
}
<ul class="topoMenu">
  <li>	
    <a href="/home">
      <img src="http://www.patilstar.com/Deepak-Patil-Profile/img/SO-logo.png" width="50%" alt="" />
    </a>
  </li>
  <li>	
    <a href="/empresas">
      <span>empresa</span>
    </a>    
    <div class="topoMenuBarra"></div>
  </li>
  <li>	
    <a href="/noticias">
      <span>noticias</span>
    </a>    
    <div class="topoMenuBarra"></div>
  </li>
  <li>	
    <a href="/trabalhe-conosco">
      <span>trabalhe conosco</span>
    </a>
    <div class="topoMenuBarra"></div>
  </li>
</ul>

Browser other questions tagged css

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