javascript - 使用 CSS 和 Javascript/原型的悬停效果

Question

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

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

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

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

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

风格：

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

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

score 2 · Accepted Answer

看看我为你设置的演示这里

2个问题：

1) 您的 seudo-selector ( :hover) 在冒号 ( ) 之后不应有空格:。

2）text-color应该只是color

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

你的 CSS 应该是

.hoverTile:hover {
    color: red;
}

不是text-color（这不是 CSS 属性）。希望修复它。

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

3 回答 3