-1

I want to use css only and make buttons slide to the right on mouse hover. I also want them to stay 'slided out' when I hover over the slided out buttons. I have looked at some posts and tried to do the same but my transition doesnt really work. Also, when I hover over buttons, buttons disappear. Thanks!!

I created a jsfiddle so you can see what I mean.

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

.div{
      -webkit-transition: width 5s;
        transition: width 5s;
    }

    .hiddenButtons{
      display:none;
    }
    .div:hover + .hiddenButtons{
      display:inline-block;
    }
    .div:not(:hover) + .hiddenButtons{
      display:none;
    }
  <div class="div">
        SHOW
    </div>
    <div class="hiddenButtons">
        <div class="button1">
            <a>button1</a>
        </div>
        <div class="button2">
            <a>button2</a>
        </div>
    </div>
Paul
  • 8,974
  • 3
  • 28
  • 48
codingworld
  • 3
  • 6

1 Answers1

0

The hidden buttons must be child elements of the SHOW button to stay visible during hover.

.div{
      -webkit-transition: width 5s;
        transition: width 5s;
    }

    .hiddenButtons{
      display:none;
    }
    .div:hover .hiddenButtons{
      display:inline-block;
    }
  <div class="div">
        SHOW

    <div class="hiddenButtons">
        <div class="button1">
            <a>button1</a>
        </div>
        <div class="button2">
            <a>button2</a>
        </div>
    </div>
    </div>
Paul
  • 8,974
  • 3
  • 28
  • 48
  • Thank you very much. Do you also know what I am doing wrong with transition effect (whatever I did I cannot achieve the transitioning effect-the buttons just 'pop out' without transition)? – codingworld Nov 14 '17 at 12:58
  • The rendering engine can't do a transition between `display:none;` and `display:inline-block;`. You need to hide the button with other means, e.g. `opacity:0;` or `width: 0;`. – Paul Nov 14 '17 at 22:25