Question

如何在悬停时将图像更改为文本，并在鼠标使用HTML，CSS和JavaScript离开时再次返回？我目前正在使用HTML5UP's Aerial theme，如果这有任何区别的话。

Answer 1

你应该只用css：

来做到这一点

#logo-holder {position:relative; width:992px; height:125px; /*dimensions of image*/}
#logo-holder .image,
#logo-holder .text {transition: opacity 0.5s ease-in-out;}
#logo-holder .text {position:absolute; top:0; left:0; opacity:0;}

#logo-holder:hover .image {opacity:0;}
#logo-holder:hover .text {opacity:1;}

<div id="logo-holder">
    <img src="http://spydar007.com/images/logo.png" class="image" />
    <div class="text">Show this text on hover</div>
</div>

Answer 2

我刚刚创建了一个快速而肮脏的解决方案，我不知道它是否真的是你正在寻找的，你是非常模糊的。

http://codepen.io/alexmccabe/pen/WvOdRw

基本上，文字始终存在，但使用opacity: 0和visibility: hidden隐藏。这允许我们进行一个很好的过渡以使文本出现。

最大的加点，根本没有使用过JS。

Answer 3

使用下面的代码真的很有帮助

    <!DOCTYPE html>
        <html lang="en" >
        <head>
        <meta charset="UTF-8">
        <title>CSS3 hover text animate in div</title>
        
        <style>
        .c--anim-btn span {
        color: black;
        text-decoration: none;
        text-align: center;
        display: block;
        }
        
        .c--anim-btn, .c-anim-btn {
        transition: 0.3s;   
        }
        
        .c--anim-btn {
        height: 64px;
        font: normal normal 700 1.2em/4em Arial,sans-serif;
        overflow: hidden;
        width: 200px;
        
        }
        
        .c-anim-btn{
        margin-top: 0em; 
        }
        
        .c--anim-btn:hover .c-anim-btn{
        margin-top: -4em;
        }
        </style>
        
        </head>
        <body>
        <!-- HINT: hover over button -->
        <div class="c--anim-btn">
        <span class="c-anim-btn">
        Hover Here
        </span>
        <span>
        <a href="http://sanwebcorner.com"><img src="http://3.bp.blogspot.com/-ZFCnUdrABLc/VlMOOwRCNeI/AAAAAAAAA9g/O5-y5ySNyLc/s1600-r/Copy%2Bof%2Bsan-02%2Bcopy.png" style="    height: 35px;
        margin-top: 15px;"></a>
        </span>
        </div>
        <h2><a href="http://sanwebcorner.com">www.sanwebcorner.com</a></h2>
        </body>
        </html>

这是reference

在悬停时将图像更改为文本

3 个答案: