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

Question

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

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  */
}

此致

Answer 1

这不是 content 属性的有效用法，它仅用于伪元素。

如果将 span 的 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>

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

Making a CSS menu with hover animation

css

firefox

google-chrome

menu

hover