html - 自定义 CSS 图像悬停状态

Question

我遇到了一点问题。我有一个菜单列表，我在其中为列表项自定义了一些图像悬停状态。在我需要更改菜单项(列表项文本长度等)之前，这工作得很好。每次发生变化时，我都必须返回并重新制作所有图像。

以下是我要完成的一些图片:

基本上，悬停会添加红色背景，并且该红色区域的副本旋转了约 2 度并且颜色较浅。是否可以通过 CSS 使用 :after 和 transform: rotate() 来做到这一点？如果不是，对于不同的字长实现这种效果的好方法是什么？

提前致谢!

树

Answer 1

正如您所说，这可以通过转换轻松完成。不过，您需要在每个按钮中包含两个元素，一个用于文本，一个用于倾斜背景:

<div class="menu-button">
    <div class="text">Screenings</div>
    <div class="hover-bg"></div>
</div>

然后将 .hover-bg 类设置为如下样式:

#menu .menu-button:hover .hover-bg
{
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(220, 50, 50, 0.4);
    transform: rotate(2deg) scale(1.05, 1);
    transform-origin: center right;
}​

Here's an example on JSFiddle

Here's an example where I had some fun with transitions .由于懒惰，我只费心让它在 Webkit 中工作，即 Chrome 和 Webkit。

请注意，为了跨浏览器兼容性，您需要供应商特定的属性前缀(-webkit-、-moz- 等)