调用：通过JavaScript传输事件来悬停伪类

以下是场景：

您有两个图像，它们彼此堆叠。最高顺序的z索引图像负责处理点击事件（想想谷歌的MapAPI），并且是透明的，而下面的图像负责视觉表示

下面是一个伪HTML/CSS表示：

div.visual-container {
    width: 10px;
    height: 10px;
}

div.visual-container:hover {
    background-color: #555;
}

div.click-container {
    width: 10px;
    height: 10px;
}

<div class='lowest'>
    <div class='visual-container'></div>
</div>

<div class='highest'>
    <div class='click-container'></div>
</div>

这部分很好，并相应地传输事件，但它似乎没有调用：hover CSS psuedo类。

---

有人有幸做过这种性质的事情吗？

hover:pseudo类不一定以其可靠性而闻名。而且，据我所知，无法通过Javascript控制其行为

根据，只有当用户启动操作时，才应应用

：hover

伪类。引述：

：hover伪类在 用户指定一个元素（带有 一些定点设备），但不 激活它。例如，一个可视的 用户代理可以应用此 当光标（鼠标）移动时的伪类 指针）悬停在生成的框上 按元素排序。用户代理不是 支持交互式媒体不需要 必须支持这个伪类

因此，在这种情况下，最好是通过绑定到所需目标元素的

mouseover

和

mouseout

事件的函数应用一个具体的类（比如

.hover

）

---

另一方面，如果将标记重新构造为层次/嵌套形式，那么DOM可能会自动为您冒泡这些事件，这可能会为您节省很多麻烦。也就是说，.

伪类的可靠性并不一定众所周知。而且，据我所知，无法通过Javascript控制其行为

根据，只有当用户启动操作时，才应应用

：hover

伪类。引述：

：hover伪类在 用户指定一个元素（带有 一些定点设备），但不 激活它。例如，一个可视的 用户代理可以应用此 当光标（鼠标）移动时的伪类 指针）悬停在生成的框上 按元素排序。用户代理不是 支持交互式媒体不需要 必须支持这个伪类

因此，在这种情况下，最好是通过绑定到所需目标元素的

mouseover

和

mouseout

事件的函数应用一个具体的类（比如

.hover

）

---

另一方面，如果将标记重新构造为层次/嵌套形式，那么DOM可能会自动为您冒泡这些事件，这可能会为您节省很多麻烦。也就是说，.

Jason的元素嵌套评论启发了这一点：

<style type="text/css">
div.visual-container {
    width: 10px;
    height: 10px;
}

.widget-container:hover div.visual-container {
   background-color: #555;
}

div.click-container {
    width: 10px;
    height: 10px;
}
</style>
...
<div class="widget-container">
  <div class='lowest'>
    <div class='visual-container'></div>
  </div>
  <div class='highest'>
    <div class='click-container'></div>
  </div>
</div>

分区可视容器{
宽度：10px；
高度：10px；
}
.widget容器：悬停div.visual-container{
背景色：#555；
}
div.click-container{
宽度：10px；
高度：10px；
}
...

---

这可能就是Jason暗示的解决方案。正如他所说的，DOM不会让您控制伪类，但是您不需要DOM来实现这一点。Style-y问题的Style-y解决方案。

Jason的元素嵌套评论激发了以下灵感：

<style type="text/css">
div.visual-container {
    width: 10px;
    height: 10px;
}

.widget-container:hover div.visual-container {
   background-color: #555;
}

div.click-container {
    width: 10px;
    height: 10px;
}
</style>
...
<div class="widget-container">
  <div class='lowest'>
    <div class='visual-container'></div>
  </div>
  <div class='highest'>
    <div class='click-container'></div>
  </div>
</div>

分区可视容器{
宽度：10px；
高度：10px；
}
.widget容器：悬停div.visual-container{
背景色：#555；
}
div.click-container{
宽度：10px；
高度：10px；
}
...

---

这可能就是Jason暗示的解决方案。正如他所说的，DOM不会让您控制伪类，但是您不需要DOM来实现这一点。Style-y问题的Style-y解决方案。

什么不调用

：悬停
？鼠标移动到最上面的元素？还是你希望它传播到最底层？另外，您是否遇到了特定浏览器的问题？创建DOM事件“mouseover”并在所需元素上调用它不会调用元素的：hover CSS伪类。没有特定的浏览器。所以，是的，基本上它没有以我想要的方式传播。它确实调用mouseover事件，但不调用：hover。到底什么东西不调用
：hover
？鼠标移动到最上面的元素？还是你希望它传播到最底层？另外，您是否遇到了特定浏览器的问题？创建DOM事件“mouseover”并在所需元素上调用它不会调用元素的：hover CSS伪类。没有特定的浏览器。所以，是的，基本上它没有以我想要的方式传播。它确实调用mouseover事件，但不调用：hover.Yes，这是一种方法。但是，我实际上想到的是，如果你在
点击容器
中添加
可视容器
，他就不必像现在这样手动传播所有DOM事件了，而且
：hover
仍然可以用。是的，那条注释没有输入错误。：）是的，这是一种方法。但是，我实际上想到的是，如果你在
点击容器
中添加
可视容器
，他就不必像现在这样手动传播所有DOM事件了，而且
：hover
仍然可以用。是的，那条注释没有输入错误。：）