Whenever i click on "special link" and keep my cursor on the submenu box everything is ok, but when i move the cursor outside the box, it transits as set and moves position to the left top corner. I would really appreciate for any advice/help with this problem to make its behaviour stable.
PS. I have only set effects for Chrome, so no visual support for other browsers.
https://jsfiddle.net/34ho1fd9/
.option:hover
{
font-style: normal;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
box-sizing: border-box;
transition-property: background;
transition-duration: .4s;
left: 0;
top: 0;
-webkit-transform: skew(-25deg);
}
span.transition
{
display: inline-block;
}
.option:hover span.transition
{
-webkit-transform: skew(25deg);
}
.submenu
{
background-color: inherit;
position: fixed;
top: 34px;
left: 28px;
width: 200px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
-webkit-transform: skew(25deg);
}
.root
{
margin:0px;
padding:0px;
font-size: 18px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
What's happening is that the .submenu is also part of your .option. So when you use .submenu:hover, you're equally acting on the everything contained.
Consider only putting inside of the :hover what you really need on hover (background-color), rather than applying a whole bunch of styles that could equally well be "pre-applied":
.option
{
font-style: normal;
cursor: pointer;
box-sizing: border-box;
transition-property: background;
transition-duration: .4s;
left: 0;
top: 0;
-webkit-transform: skew(-25deg);
}
.option:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.option .submenu {
background-color: rgba(0, 0, 0, 0.3);
}
.option span.transition
{
-webkit-transform: skew(25deg);
}
See this updated Fiddle: https://jsfiddle.net/34ho1fd9/4/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments