Question

大家早上好。我有一个小项目，如果可能的话，我想在没有JavaScript的情况下使用CSS。

是否可以创建元素，在父元素悬停时，图像会加载到文本旁边？

我添加了一个Jsfiddle，所以你可以希望看到我的意思： http://jsfiddle.net/atx9re4s/

将文本幻灯片悬停在右侧，我想看看是否可以将图像加载到文本左侧的空间中。我已经为此使用了图像标签，但是可以使用像ico moon这样的cdn字体，它会将标签更改为带有类的范围。

感谢您的帮助。

<!-- HTML -->
<div>
    <div class="button">
        <img src="http://www.midnightbsd.org/art/logo/MidnightBSDLogo64x64.png">         
        Reserve your Spot
    </div>
</div>

<!-- CSS -->
/* the button */
.button {
    background: #f0aa28;
    color: #fff;
    font-weight: 700;
    padding: 20px;
    transition: .3s;
}
.button:hover {
    background: #0e4fad; 
    padding-left: 60px;
}

/* the icon */
.button img {display: none;}
.button img < .button:hover {display: inline-block;}

Answer 1

我认为这可能是你想要的：http://jsfiddle.net/p7o75pLv/

诀窍是将图像设置为悬停时div的背景图像，如下所示：

.button:hover {
    background: #0e4fad; 
    background-image: url("http://www.midnightbsd.org/art/logo/MidnightBSDLogo64x64.png");
    background-repeat: no-repeat;
    padding-left: 60px;
}

带有图标的CSS菜单动画

1 个答案: