Question

第一个stackoverflow帖子，所以请原谅我是否遗漏了明显的东西。我确实首先搜索了一个答案，但没有找到一个我认为相关的答案。

在这个jsfiddle中，我有一个div，我将其用作悬停目标，以便在<a>元素中进行一些转换。

这是标记：

<div class="target">Target
  <a href="#" class="LightMe"><p>.LightMe</p></a>
</div>

和css：

body {
  background-color: #099;
  height: 100%;
  width: 100%;
  margin-top:200px;
}

.target{
  position: absolute;
  left: 40%;
  height: 100px;
  width: 200px;
  padding: 20px;
  background-color: #ccc;
  cursor: pointer;

 }

a {
  display: block;
  position: relative;
  padding: 1px;
  border-radius: 15%;
}

a.LightMe {
  /*Starting state */
    background-color: white;
    border-style:solid;
    border-color:#fff;
    top: -120px;
    left: -200px;
    height: 80px;
    width: 80px;
    z-index: 10;
    opacity: 0;
    transition:left 0.55s  ease, opacity .5s .7s ease;
    -webkit-transition:left 0.55s  ease, opacity .5s .7s ease;
    -o-transition:left 0.55s  ease, opacity .5s .7s ease;
}

.target:hover a.LightMe {
/*Ending state*/
  left: 80px;
  opacity: 1;
  transition:left 0.55s .7s ease, opacity .5s ease;
  -webkit-transition:left 0.55s .7s ease, opacity .5s ease;
  -o-transition:left 0.55s .7s ease, opacity .5s ease;
}

.target:hover {
    transition: background-color 500ms ease;
    -webkit-background-color 500ms ease;
    -o-background-color 500ms ease;
    background-color:#999;
}

将鼠标悬停在标有“目标”的灰色框上，然后再次退回以查看<a>元素上的过渡。它正在做我想要的：不透明度在位置延迟期间淡入，然后滑动到所需位置。当移出悬停目标时，<a>会滑动到原始位置，然后不透明度会消失。到目前为止一切都很好。
如果用户将鼠标悬停在隐藏的<a>元素上，它会触发相同的转换集，从而导致各种意外的破坏。

我想阻止对悬停在<a>元素上的任何直接响应，并且如果可能的话，我希望继续将其保留在css中。

我尝试将显式悬停添加到<a>和.LightMe以覆盖此功能，但无济于事。（虽然这可能是因为我没有使选择器语法正确。）

我故意将背景颜色过渡添加到.target进行测试，它提供了一个有趣的线索：将鼠标悬停在<a>上会触发.target div的上游过渡。这就是我的大脑破裂的地方，我决定最好寻求帮助。

我正在处理一些高于我头脑的事情，我只是从我能找到的最接近的事情开始，并朝着我需要的方向努力。这是jsfiddle的起点（感谢作者）：

Answer 1

您可以在查看器端口之外启动“顶部”位置，并延迟“顶部”转换，直到“左”转换结束。这样，<a>元素在左转换开始之前将无法点击。

请参阅：http://jsfiddle.net/Q9rfg/4/

或者你也可以使用这个方法，结合aorcsik建议的兄弟选择器。

Answer 2

更新：另一个 hacky 解决方案是放置一个div，它位于悬停敏感元素之外，覆盖移动链接。看看：http://jsfiddle.net/aorcsik/Q9rfg/2/

我原来的想法（下面）的问题是，您无法点击移动链接，因为它返回到原始位置，一旦您从灰色框中移出，光标也会在隐藏链接上移动。

我会尝试将<a>从灰色框中取出，放在后面，并使用兄弟选择器+在css中引用它。

.mainclass.subclass:hover + a.LightMe {
    /* ... */
}

这样一来，当它自己徘徊时，它不会触发灰盒子的悬停效果，而你会留在纯净的css土地上。

这会使定位变得有点棘手，这是一个小提琴，请查看：http://jsfiddle.net/aorcsik/Q9rfg/1/

禁用纯css中的悬停效果

2 个答案: