i've done question transition, time have lot harder, , have got 1 more time problem transition, have no idea why won't work, anyway. made king "bar", anyway interface, button plus. when hover pointer on button, go , show other element, transition. when hover out transition work button plus (trigger1) not other hyperlink. why?
here code: html
<html> <head> <title>web interface test</title> <meta charset="utf-8" /> <link rel="stylesheet" href="/interface.css" /> </head> <body> <div class="trigger"> <div class="div"> <center> <span class="text">+</span> </center> </div> <a class="element" href="#"></a> <a class="element2" href="#"></a> <a class="element3" href="#"></a> </div> </body> </html> and css:
.div { width: 50px; height: 50px; bottom: 5%; right: 5%; background: black; transition: transform 300ms ease-in-out; position: fixed; z-index: 5; border-radius: 50%; visibility: visible; } .trigger:hover .div { transform: translate(0px, -200px) rotate(45deg); } .trigger { width: 50px; height: 50px; background: red; position: absolute; bottom: 5%; right: 5%; position: fixed; z-index: 4; border-radius: 50% } .element { width: 50px; height: 50px; bottom: 5%; right: 5%; background: indigo; transition: transform 300ms ease-in-out; position: fixed; z-index: 3; visibility: hidden; border-radius: 50%; } .trigger:hover .element { transform: translate(0px, -50px); visibility: visible; } .element2 { width: 50px; height: 50px; bottom: 5%; right: 5%; background: yellow; transition: transform 300ms ease-in-out; position: fixed; z-index: 3; visibility: hidden; border-radius: 50%; } .trigger:hover .element2 { transform: translate(0px, -100px); visibility: visible; } .element3 { width: 50px; height: 50px; bottom: 5%; right: 5%; background: blue; transition: transform 300ms ease-in-out; position: fixed; z-index: 3; visibility: hidden; border-radius: 50%; } .trigger:hover .element3 { transform: translate(0px, -150px); visibility: visible; } .text { color: white; font-size: 40px; top: } thank's lot help!
this because set visibility: hidden on elements when .trigger element not being hovered. looks they're not transitioning, in reality, they're disappearing.
Comments
Post a Comment