隐藏异常DOM结构上的元素

Question

我有一个问题，使一个元素在:hover期间隐藏，问题是DOM的结构很难导航，当用户悬停到.flex-zero时，我如何使.seperator隐藏？如果我改变结构，我必须确保flexbox像现在一样工作，这是一个挑战。

.selector-wrap {
    margin: 5px 0 0 0;
    width: 100%;
    border: 1px solid;
    display: flex;
    justify-content: space-evenly;

    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;

      &.flex-zero {
        flex: 0;
        visibility: hidden;

        &:hover {
          visibility: visible;

          //here
          how to make seperator hidden?
        }
      }
    }
  }

演示http://jsfiddle.net/3vp8emc6/

Answer 1

当用户悬停到.flex-

时，如何隐藏.seperator？

在当前的DOM structure中，使用css,是不可能的，当然可以使用jquery。

您可以尝试这样做，而不是更改DOM structure

.selector-wrap:hover .seperator {
    opacity: 0;
}