使用 CSS 和 Javascript/原型的悬停效果答案

【问题标题】：Hover Effect using CSS and Javascript/Prototype使用 CSS 和 Javascript/原型的悬停效果
【发布时间】：2012-05-25 16:50:03
【问题描述】：

我有一个 4x4 的瓷砖矩阵。每个图块基本上是一个div。现在，我想做以下事情：

注意：瓷砖不断变化的位置，所以在某一时刻给定的瓷砖必须有悬停效果，但重新排列后，它可能没有。并且重新排列不完整，即我没有重置整个矩阵。它只涉及移动几块瓷砖。

我需要使用 css 类和 javascript（原型，而不是 jquery）来实现它。我为hoverTile 类设置了悬停样式。我为每个图块添加了一个鼠标悬停，这样每当用户的鼠标悬停在图块上时，我的函数就会被调用，它使用setAttribute 为html div 元素设置类。总结如下：

Before:
<div> ... </div>

After:
<div class="hoverTile"> ... </div>

风格：

.hoverTile: hover{
    text-color: red;
}

这似乎不起作用，即使当我检查 html 页面时出现类名。这里有什么错误？

【问题讨论】：

【解决方案1】：

看我为你设置的demoHERE

2 个问题：

1) 您的伪选择器 (:hover) 不应在冒号 (:) 后有空格。

2) text-color 应该只是 color

【讨论】：

【解决方案2】：

Micron 和 Igo 可能回答了您的问题，尽管我想补充一点，您可以通过添加 div:hover { color: red; } （您可能不需要 hoverTile 类）。

至于边框颜色 border-color:red; 应该可以工作。 [W3schools] 所以 .hoverTile { border: 5px solid #ff0000; } 在您的计划中。

【讨论】：

【解决方案3】：

你的 CSS 应该是

.hoverTile:hover {
    color: red;
}

不是text-color（这不是 CSS 属性）。希望能解决。

编辑：另外，如果我理解正确，您是在鼠标悬停时添加hoverTile 类吗？在这种情况下，您的 CSS 中根本不需要 :hover 伪类。确保在 mouseout 时删除 hoverTile 类。

【讨论】：