Question

在我的网站上，有一个＆＃34; dock＆＃34;当用户将鼠标悬停在一个上面时，会有一个简短的描述＆＃34;＆＃34;从图标。下面是效果的CSS，它在Dreamweaver中运行良好，但似乎无法在任何浏览器中运行。

<style>
    .css3-notification {

    font-size: .8em;
    text-align: center;
    padding: 10px;
    color: #2b2b2b;
    margin-left: 20px;
    position: relative;     
    font-weight: bold;

    -webkit-animation: ease-in 800ms;
    -moz-animation: ease-in 800ms;      
    -o-animation: ease-in 800ms;
    animation: ease-in 800ms;
}

    @-webkit-keyframes ease-in {
    from   {top: -40px; opacity:0;}
    to     {top: 0px;}
}

    @keyframes ease-in {
    from   {top: -40px; opacity:0;}
    to     {top: 0px;}
}
</style>

<div class="dock" id="dock">
 <div class="dock-container">

 <a class="dock-item" href="#"><img src="../Site images/Bill@2x.png" alt="home" /><span class="css3-notification"><font size="3">IDEATION</font><p>Put your idea on paper</p></span>

 <a class="dock-item" href="#"><img src="../Site images/Jesus@2x.png" alt="contact" /><span class="css3-notification"><font size="3">TEAM</font><p>Build a team</p></span>

 <a class="dock-item" href="#"><img src="../Site images/Financestat@2x.png" alt="music" /><span class="css3-notification"><font size="3">MVP</font><p>Track and compile data from testing</p></span>

 <a class="dock-item" href="#"><img src="../Site images/Dollarbag@2x.png" alt="video" /
>  <span class="css3-notification"><font size="3">Funding</font><p>Find Funding</p></span>

 <a class="dock-item" href="#"><img src="../Site images/Spaceship@2x.png" alt="history" /><span class="css3-notification"><font size="3">LAUNCH</font><p>Successfully Launch</p></span>

</div> 
</div>

Answer 1

不太确定你究竟是怎么做到的，但这是一个可能有用的简单技巧。最初将.css3-notification显示为：none。然后在父.dock-item的悬停下，显示子.css3-notification;如下所示：

a.dock-item:hover .css3-notification
{
    display:block;
}

效果无法在任何浏览器中使用

1 个答案: