3

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

在这个 jsfiddle 中，我有一个 div 用作悬停目标，以使<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进行测试，它提供了一个有趣的线索：将鼠标悬停在div<a>的上游过渡触发器上。.target那是关于我的大脑坏掉的地方，我决定我最好寻求帮助。

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

4

2 回答 2

2

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

见：http: //jsfiddle.net/Q9rfg/4/

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

于 2013-10-31T09:58:33.220 回答
1

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

我最初的想法（如下）的问题是，您无法单击移动链接，因为它返回到其原始位置，一旦您将鼠标悬停在灰色框外，光标也会更改在隐藏链接上。

我会尝试<a>摆脱灰色框，将其放在后面，然后使用兄弟选择器在 css 中引用它+。

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

这样它就不会在自己悬停时触发灰色框的悬停效果，并且您将停留在纯 CSS 土地上。

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

于 2013-10-31T08:38:11.617 回答