自定义CSS图像悬停状态

Question

我遇到了一些问题。我有一个菜单列表，我自定义列表项的一些图像悬停状态。这完全正常，直到我需要更改菜单项（列表项文本长度等）。每次发生变化时，我都必须返回并重新制作所有图像。

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

基本上，悬停添加了红色背景，并且该红色区域的副本旋转了~2度并且颜色较浅。是否可以通过:after和transform: rotate()的CSS执行此操作？如果没有，那么对于不同的字长来说，实现这种效果的好方法是什么？

提前致谢！

滓

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-等）

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

这将指出您的解决方案。