Edgar Kiljak Edgar Kiljak - 29 days ago 11
CSS Question

jQuery text decoration underline in navbar

When mouse enter one of li About Portfolio Contact how to make text-decoration underline. Also how to control the speed of underline and what if I want just 1/3 of the word to be decorated by underline? Am I thinking right? Please help!

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnabout"><a href="#parallax"><strong>About</strong></a></li>
<li id="btnportfolio"><a href="#portfolio"><strong>Portfolio</strong></a></li>
<li id="btncontact"><a href="#contact"><strong>Contact</strong></a></li>
</ul>
</div>
</div>
</nav>



$(document).ready(function(){
$('navbar-collspse').mouseenter(function(){
$(#btnabout).css("text-decoration", underline");
});
});

Answer

Use CSS:

.nav li a:hover{
   text-decoration: underline;
}

if the line should span only 1/3 the width, than use a a:after pseudo to create your line

.nav li{
  display:inline-block;
}
.nav li a{
  position:relative;
  display:block;
  padding: 8px 16px;
  text-decoration: none;
}
.nav li a:after{
  content: "";
  position:absolute;
  bottom: 0;
  left:16px;  /* = padding size */
  height: 1px;
  width:0;
  transition: 0.3s;
  background: blue;
}
.nav li a:hover:after{
  width: 33.333%;
}
<ul class="nav navbar-nav navbar-right">
  <li id="btnabout"><a href="#parallax"><b>About</b></a></li>
  <li id="btnportfolio"><a href="#portfolio"><b>Portfolio</b></a></li>
  <li id="btncontact"><a href="#contact"><b>Contact</b></a></li>
</ul>


If instead you want to play with jQuery (totally useless in this specific styling-only case) it would look like:

$(document).ready(function() {

  $('.nav li a').on({
    mouseenter : function() {
      $(this).css("text-decoration", "underline");
      // other mouseenter magic here
    },
    mouseleave : function() {
      $(this).css("text-decoration", "none");
      // other mouseleave magic here
    }
  });

});
li a{text-decoration: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav navbar-nav navbar-right">
  <li id="btnabout"><a href="#parallax"><b>About</b></a></li>
  <li id="btnportfolio"><a href="#portfolio"><b>Portfolio</b></a></li>
  <li id="btncontact"><a href="#contact"><b>Contact</b></a></li>
</ul>

Comments