自定义 CSS 图像悬停状态答案

【问题标题】：Custom CSS image hover-states自定义 CSS 图像悬停状态
【发布时间】：2012-08-10 02:53:30
【问题描述】：

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

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

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

提前谢谢！

特雷

【问题讨论】：

标签： html css image hover hyperlink

【解决方案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- 等）

【讨论】：

这正是我想要的。我用的是Wordpress，所以我用jQuery在列表项里面插入了一个hover-bg div来达到这个效果。非常感谢。
我确实遇到了一个问题，如果您将鼠标悬停在 .hoverbg 的顶部，它将激活后旋转的 div 而不是我示例中的链接：jsfiddle.net/heHY9，如果您也可以看一下，将不胜感激。谢谢
原因是您对链接本身具有悬停效果，这意味着一旦鼠标离开链接，红色背景就会消失，即使从技术上讲，鼠标仍位于列表项上方。将悬停伪类移动到列表项，它按预期工作：jsfiddle.net/heHY9/2
啊。太简单。我玩了几次，不知道为什么。非常感谢！

【解决方案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;
}

这将为您指明解决方案。

【讨论】：