내비게이션 jQuery CSS 슬라이딩 바 CSS

Question

$(".myNav").hover (
    function() { 
      $('.bar').animate({width: "102px"}, 500) 
      $(".myNav").animate ({backgroundColor: "#FF9900"}, 500) 
    }, 
    function(){ 
     $('.bar').animate({width: "-0"}, 500) 
      $(".myNav").animate ({backgroundColor: "#ffb84d"}, 500) 
    } 
); 

이 코드는 탐색 버튼 아래에 슬라이딩 바를 추가하는 데 사용되지만, 마우스를 가져 가면 같은 클래스의 모든 버튼에 영향을 미칩니다.

CSS를 사용하여이 작업을 수행 할 수있는 방법이 있는지 궁금합니다. 막대를 다시 순수한 당신이 애니메이션을 만들기 위해 transition를 사용할 수있는 CSS 및 :pseudo-elements와

http://jsfiddle.net/cgcLe1hs/

Answer 1

; 이 시도 :

.myTable { 
 
    border-collapse: collapse; 
 
    padding: 0px; 
 
} 
 
.myNav { 
 
    width: 100px; 
 
    text-align: center; 
 
    background-color: #ffb84d; 
 
    padding-bottom: 5px; 
 
    position: relative; 
 
    transition: background .5s linear; 
 
} 
 
.myNav:hover { 
 
    background: #FF9900; 
 
} 
 
.myNav:after { 
 
    content: ""; 
 
    height: 3px; 
 
    width: 0; 
 
    background: #000; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    transition: width .5s linear; 
 
} 
 
.myNav:hover:after { 
 
    width: 100%; 
 
}

<table class="myTable"> 
 
    <tr> 
 
    <td class="myNav"> 
 
     Home 
 
    </td> 
 
    <td class="myNav"> 
 
     About 
 
    </td> 
 
    </tr> 
 
</table>

---

_{은 제외하고 내가 나란히이 될 수있는 요소와 스타일을 가진 메뉴 instrad 사용 목록을 작성하는 테이블의 사용을 방지하기 위해 제안}