Как вставлять текст, когда я нависаю над навигационной панелью?

Поэтому, когда я наводил курсор на каждую вкладку navbar, я бы хотел, чтобы панель сместилась справа с описанием наведенной вкладки. Например, если я нахожусь над «Исследованием», бар будет скользить справа, говоря «Читайте о моих текущих исследованиях». Как мне это сделать? Могу ли я использовать строго CSS3? Или мне нужен Javascript? Мой код ниже:Как вставлять текст, когда я нависаю над навигационной панелью?

HTML:

 <!DOCTYPE html> 
     <html> 
     <head> 
      <title>Matthew H. Goodman</title> 
      <link href="stylesheettabs.css" rel="stylesheet" type="text/css"/> 
     </head> 
     <body> 
      <ul id="nav"> 
      <li><a href="web2home.html">HOME</a></li> 
      <li><a href="web2cv.html">CV</a></li> 
      <li><a href="#">RESEARCH</a></li> 
      <li><a href="web2con.html">CONTACT</a></li> 
      </ul> 
     </body> 
     </html>

CSS:

 #nav { 
     padding:0px; 
     margin-top: 200px; 
     border-radius: 10px; 
     left: 0; 
     width: auto; 
     position: absolute; 
     height: auto; 
     background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
     overflow: hidden; 
     } 

     #nav li { 
     position: relative; 
     list-style: none; 
     width: auto; 
     border-top: 1px solid black; 
     } 

     #nav li a { 
     position: relative; 
     display: block; 
     text-decoration: none; 
     font-size: 15px; 
     font-weight: bold; 
     color: white; 
     text-align: center; 
     padding: 15px; 
     } 

     #nav li:hover { 
     background-color: black; 
     } 

     #nav li a:hover { 
     color: #778899; 
     display: block; 
     padding: 15px; 
     }

источник

2015-05-03 Snoop2001

JSBIn

я отправляю демо на jsbin.Here является ключевой код:

#nav li span{ 
    transition: all 0.5s; 
    position: absolute; 
    top: 0; 
    left: -300px; 
    display: block; 
    width: 300px; 
    height: 100%; 
    background: #69f; 
    z-index: -1; 
} 
     #nav li:hover span{ 
     left: 100px; 
     }

источник

2015-05-03 23:50:09

Как вставлять текст, когда я нависаю над навигационной панелью?

ответ

Смежные вопросы