자바스크립트로 메뉴에 효과를 주고 싶어요

메뉴를 hover 했을때 두번째 그림처럼 메뉴에 가운데 선이 그어지고 색도 바뀌는 효과를 주고 활성화가 되지 않은 메뉴들은

투명도를 주고 싶은데요. 자바스크립트를 이용해서 만들어야할것 같은데 어떻게 만들어야 해야할지 잘 모르겠어서 질문드려요ㅠ

<div id="nav">
      <ul>
        <li class="n1"><a href="about.php">ABOUT ME</a></li>
        <li class="n2"><a href="resume.php">RESUME</a></li>
        <li class="n3"><a href="work">WORK</a></li>
      </ul>
    </div>

그리고 반응형 웹 홈페이지를 만들고 있는데요

웹상의 세로 가로 넓이에 상관없이 배경이 꽉 보였으면 좋겠어서 바디에 백그라운드 100%를 줬는데, 크기를 줄이면 이미지 비율에 맞게 줄어들어요ㅠㅠ그래서 배경 밑으로 하얀색 배경이 보여요ㅠㅠ

body {
 font-family: 'op', monospace;
 font-size: 14px;
 background-image: url(../images/index.jpg);
 background-size: 100%;
 background-repeat: no-repeat;
}