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;
}​

这是一个关于 JSFiddle 的例子

这是一个让我玩转转折的例子。由于懒惰，我只费心让它在 Webkit 中工作，即 Chrome 和 Webkit。

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

Answer 2

这可以在纯 CSS（甚至不是 3）中完成。

悬停时有一个倾斜的背景图像，将其放置在左侧和顶部几个像素处并添加背景颜色。

由于背景颜色的原因，您只会看到图像的一部分：

<div class="text">Screenings</div>

.text {
  color: #000;
  margin-left: 5px;/*to make room for the hover image */
  padding: 4px;
}
.text:hover {
  background: #900 url(tiltedimage.png) no-repeat -5px -5px;
  color: #fff;
}

这将为您指明解决方案。