制作带有悬停动画的 CSS 菜单答案

【问题标题】：Making a CSS menu with hover animation制作带有悬停动画的 CSS 菜单
【发布时间】：2015-07-22 07:56:22
【问题描述】：

我正在制作一个每行包含 2 个项目的菜单，我希望它们具有背景图像，并且在悬停时图像将变为其他图像。我可以在 chrome 中使用 CSS 中的内容，但 Firefox 和 IE 不支持这一点。因此它应该用背景图像制作。问题在于，对于内容，我可以指定按钮将具有左侧宽度和高度的 35%，而使用背景图像进行此操作是不可能的，我需要特别说明它们将具有 px 的高度和当我调整窗口大小时，它不会调整大小。当我调整窗口大小时，左侧会调整大小，因此其中的内容会自动调整大小，因为我定义了它的 35%。这是我如何制作它的示例代码（在 chrome 中工作，而不是在 firefox 和 IE 中）。有人可以帮助我使用背景图像执行此操作，并且在我调整窗口大小时仍然调整按钮大小吗？

https://jsfiddle.net/37qbtwak/

ul.sidebar-menu li a span {
width:35%;
height:35%;
border:1px solid;
}

ul.sidebar-menu li a span#menu_sensor {
content: url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%; /*  Safari  */
-khtml-background-size: 100% 100%; /*  Konqueror  */
-moz-background-size: 100% 100%; /*  Firefox  */
}

使用背景图片我必须这样做：

ul.sidebar-menu li a span#menu_sensor {
content: url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height:100px;
-webkit-background-size: 100% 100%; /*  Safari  */
-khtml-background-size: 100% 100%; /*  Konqueror  */
-moz-background-size: 100% 100%; /*  Firefox  */
}

最好的问候

【问题讨论】：

你为什么不把实际的图像放在那里？
为什么不直接设置背景图片？

标签： css google-chrome firefox menu hover

【解决方案1】：

这不是对 content 属性的有效使用，该属性仅用于伪元素。

如果将跨度的display 属性设置为inline-block，则可以使用padding 属性设置相对于宽度的高度。然后将background-size 属性设置为contain 并将图像居中。

ul.sidebar-menu{
    list-style:none;
    margin:0;
    padding:0;
}
ul.sidebar-menu li{
    margin:0 0 50px;
}
ul.sidebar-menu li.sub-menu{
    line-height:15px;
}
ul.sidebar-menu li.sub-menu a{
    color:#aeb2b7;
    margin-bottom:0 20px 30px 10px;
    outline:none;
    text-decoration:none;
    transition:all .3s ease;
}
ul.sidebar-menu a span {
    border:1px solid;
    display:inline-block;
    padding:0 0 12.25%;
    width:35%;
}
#menu_sensor{
    background:url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png') center center no-repeat;
    background-size:contain;
}
#menu_sensor:hover,#menu_sensor:focus{
    background-image:url('http://www.webyposicionamientoseo.com/base/ui/images/blog/27-google-hummingbird.jpg');
    color:#fff;
}

<ul class="sidebar-menu" id="nav-accordion">
    <li class="sub-menu">
        <a href="/sensor"><span id="menu_sensor"></span></a>
    </li>
</ul>

【讨论】：