First-child and hover functioning

Question

First-child and hover functioning

Navigation

#1 by (2 votes)

1

I have a TOPO and I would like the first li , in the case that contains the logo , do not have the border when I hover the mouse over. In other cases, yes.

I tried the following CSS and I 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

asked by anonymous 12.12.2014 / 16:59

1 answer

How to access a directive through a controller? Use filter_input (FILTER_SANITIZE_NUMBER_INT) in an array with integer type items

score 2 · Accepted Answer

I took your code and made some changes to it. Take a look if it suits your needs.

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