1

Tenho um TOPO e gostaria que no primeiro li, no caso o que contém o logo, não tenha a borda, quando eu passo o mouse em cima. Já nos outros sim.

Tentei com o seguinte CSS e não consegui.

.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>

1 Resposta 1

2

Aproveitei seu código e fiz algumas alterações nele. Dá uma olhada se atende à sua necessidade.

.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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .