Question

我只想使用css，并且鼠标悬停时按钮会向右滑动。我也希望他们留下来＆＃39;滑出＆＃39;当我将鼠标悬停在滑出的按钮上时。我看过一些帖子并试图做同样的事情，但我的过渡并没有真正起作用。此外，当我将鼠标悬停在按钮上时，按钮会消失。谢谢！

我创建了一个jsfiddle，你可以看到我的意思。

https://jsfiddle.net/codingcodingcoding/58406ahk/

＆＃13;

.div{
      -webkit-transition: width 5s;
        transition: width 5s;
    }

    .hiddenButtons{
      display:none;
    }
    .div:hover + .hiddenButtons{
      display:inline-block;
    }
    .div:not(:hover) + .hiddenButtons{
      display:none;
    }

＆＃13;

  <div class="div">
        SHOW
    </div>
    <div class="hiddenButtons">
        <div class="button1">
            <a>button1</a>
        </div>
        <div class="button2">
            <a>button2</a>
        </div>
    </div>

＆＃13;

Answer 1

隐藏按钮必须是SHOW按钮的子元素才能在悬停期间保持可见。

＆＃13;

.div{
      -webkit-transition: width 5s;
        transition: width 5s;
    }

    .hiddenButtons{
      display:none;
    }
    .div:hover .hiddenButtons{
      display:inline-block;
    }

＆＃13;

  <div class="div">
        SHOW

    <div class="hiddenButtons">
        <div class="button1">
            <a>button1</a>
        </div>
        <div class="button2">
            <a>button2</a>
        </div>
    </div>
    </div>

＆＃13;

仅限CSS - 如何使按钮滑出并保持位置直到鼠标离开？

1 个答案: