使用CSS和Javascript / Prototype悬停效果

Question

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

• 当鼠标指针在特定的图块上时，我必须检查对该图块执行检查（使用我已经完成的位置和内容）。如果瓷砖符合要求，则应具有悬停效果。

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

我需要使用css类和javascript（原型，而不是jquery）来实现它。我为班级hoverTile设置了悬停样式。我在每个磁贴上添加了一个鼠标悬停，这样每当用户的鼠标位于磁贴上时，我的函数被调用，它使用setAttribute设置html div元素的类。 以下是摘要：

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

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

风格：

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

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

Answer 1

查看我为您设置的演示HERE

2个问题：

1）你的seudo-selector（:hover）在冒号（:）之后不应该有空格。

2）text-color应为color

Answer 2

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

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

Answer 3

你的CSS应该是

.hoverTile:hover {
    color: red;
}

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

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