在纯CSS中禁用悬停效果

Question

这是我的第一个stackoverflow帖子，如果我漏掉了一些显而易见的东西，请谅解。我先搜索了答案，但没有找到我认为相关的答案。

在这个jsfiddle中，我有一个

元素，我将其用作悬停目标，以使一些转换发生在<a>元素上。

http://jsfiddle.net/ramatsu/Q9rfg/

这是标记：

<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;
}

1. 将鼠标悬停在标记为“Target”的灰色框上，然后再移开，以查看<a>元素上的过渡效果。它正在做我想要的事情：不透明度在位置延迟期间淡入，然后滑动到所需位置。当移出悬停目标时，<a>滑动到原始位置，然后不透明度恢复淡出。到目前为止一切都好。
2. 问题是，如果用户将鼠标悬停在隐藏的<a>元素上，它会触发相同的一组过渡效果，这会导致各种意外的麻烦。

我希望能够防止直接悬停在<a>元素上产生任何响应，并且如果可能的话，我真的希望继续在css中保留它。

我尝试添加一个显式的悬停到<a>和.LightMe来覆盖此操作，但没有成功。（虽然这可能是因为我只是没有正确选择语法。）

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

我正在处理一些超出我的能力范围的东西，我只是从我能找到的最接近的东西开始，并朝着我需要的方向努力。这是起点 jsfiddle（感谢作者）：

- ramatsu

---

可能是display属性的转换的重复问题。 - Bram Vanroy

Answer 1

您可以将“top”位置放在视口外，并延迟“top”过渡，直到“left”过渡结束。这样，<a>元素在左侧过渡开始之前将无法点击。

参见：http://jsfiddle.net/Q9rfg/4/ 或者您也可以使用此方法，结合 aorcsik 建议的同级选择器。

- hexalys

---

谢谢，太完美了！我不仅感激你的想法，更感激你的实现，因为我可以保证，在我的水平上，要让过渡效果正确添加需要很长时间。我没有足够的stackoverflow声望来投票支持你，但这个解决方案对我来说是一个大大的绿色勾号。 - ramatsu

Answer 2

更新：另一种“hacky”解决方案是放置一个在敏感元素外的

，覆盖移动链接。请查看：http://jsfiddle.net/aorcsik/Q9rfg/2/

我的原始想法存在问题（如下），因为当你将光标移出灰色框时，移动的链接会返回到其原始位置，而且光标会在隐藏的链接上发生变化，所以无法单击该链接。

---

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

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

这样做就不会在悬停时触发灰色框的悬停效果，您仍然保持在纯CSS领域。这将使定位变得有些棘手，这里有一个演示，请查看: http://jsfiddle.net/aorcsik/Q9rfg/1/

- aorcsik

---

这是一个有趣的解决方案，不过你需要清除指针，因为链接区域仍然存在。 - hexalys

@Bry 你说得对，我创建了另一个更加hacky的解决方案，但它能够完成任务，并且仍然不涉及任何JavaScript。 - aorcsik

确实很糟糕...另一个解决方案是在正确的上下文中从转换的元素开始使用负索引，类似于我在这里提出的建议：https://dev59.com/OXHYa4cB1Zd3GeqPHh_4#16100950 - hexalys

感谢您的想法，aorcsik - 我会采用Bry的方法，但是会复制您的一份副本以供学习，并在我的需求发生变化且您的一些想法更适合时使用。非常感谢您的时间和兴趣。 - ramatsu