使用 CSS 在悬停时转换列表元素答案

【问题标题】：Using CSS to transform list elements on hover使用 CSS 在悬停时转换列表元素
【发布时间】：2013-06-12 06:09:08
【问题描述】：

我在制作它时遇到了麻烦，因此我拥有的链接（嵌套在列表元素中）在悬停时会旋转。我一直在这样做：

li:hover {
  color: #ff0000;
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  transform: rotate(15deg);
}

我知道 CSS 正在应用，因为颜色发生了变化。我知道我的语法是正确的，因为当我尝试同样的事情时，用nav 代替li，它起作用了。是否有原因这不适用于lis，特别是出于某种原因？

【问题讨论】：

您能填写一个jsfiddle.net 来显示您的列表和未正确应用的 CSS 吗？
@GCyrillus 不幸的是，不，因为我正在使用 Ruby on Rails 和 Sass 和嵌入式 ruby 之类的东西。我用 CSS 和 HTML 来表达我的问题。
您可以在 codepen.io 中使用 Sass，如果这有助于向我们展示您的麻烦...
@GCyrillus 最重要的是嵌入式红宝石。我没有使用一个 HTML 页面，我使用了两个（一个让步于另一个），而且不是所有的 HTML。

【解决方案1】：

您可以尝试将您的 css 中的 li 选择器更改为链接选择器，然后添加

display:inline-block;

见http://jsfiddle.net/xKNrQ/。您可以将 display 属性添加到 li 选择器，但是您必须使用单独的规则来应用标签的颜色更改。

【讨论】：

【解决方案2】：

你的 li 是否设置为块元素？

我添加了这个 CSS：

li {
    display: block;
    width: 100px;
    height: 20px;
}

【讨论】：