Question

因此，当我将鼠标悬停在每个导航栏标签上时，我希望从右侧滑入一个条形图，其中包含悬停标签的说明。例如，如果我将鼠标悬停在＆＃34; Research，＆＃34;一个酒吧会从正确的说法中滑入＆＃34;阅读我目前的研究。＆＃34;我该怎么做？我可以严格使用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;
      }

Answer 1

JSBIn

我在jsbin上发布了一个演示。这是关键代码：

 #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;
      }

将鼠标悬停在导航栏上时如何将文本滑入？

1 个答案: