WordPress custom css menu hover issues in chrome

1 Views

I’m trying to fix a bug on the website http://www.cleanflowfilter.nl/.
This website has a menu on the left side of the screen witch should show a picture when hovered on a menu item and of course not display the picture anymore when you mouse-out.
This actualy works in all browsers except in chrome. I really can`t find the problem…

The code used for the effect is as follows:

Read More
.sidebar-button {
    background: #898C8D;
    border: 1px solid #fff;
    outline: 1px solid #555;
    color: #fff !important;
    display: block;
    float: left;
    font-family:'Oswald', sans-serif, verdana;
    font-size: 15px;
    font-weight: 300;
    margin: 1px;
    margin-top:6px;
    opacity: 0.6;
    text-decoration: none;
    text-transform: capitalize;
    width: 201px;
}
.sidebar-button:hover {
    outline: 1px solid #025666;
    opacity: 1.2;
    background: #109DB8;
}
.sidebar-button a {
    display: block;
    padding: 11px 13px;
    position: relative;
    z-index: 5;
    color: #fff !important;
}
.sidebar-button img {
    display:none;
    margin-top: -45px;
    margin-top:0px;
    float:left;
}
.black-studio-tinymce-14 .sidebar-button img, .black-studio-tinymce-17 .sidebar-button img, .black-studio-tinymce-24 .sidebar-button img, .sidebar-button img {
    display:none;
    z-index:1;
}
.black-studio-tinymce-14 .sidebar-button a:hover~img, .black-studio-tinymce-17 .sidebar-button a:hover~img, .black-studio-tinymce-24 .sidebar-button a:hover~img, .sidebar-button a:hover~img {
    display:block;
}
.black-studio-tinymce-14 .sidebar-button:hover~img, .black-studio-tinymce-17 .sidebar-button:hover~img, .black-studio-tinymce-24 .sidebar-button:hover~img, .sidebar-button:hover~img {
    display:block;
}
.sidebar-button a {
    float:left;
    width:100%;
    padding:0px 13px !important;
    line-height:45px;
    z-index:999;
}

Hope someone can help me out!
Thanks in advance.

Post Views: 1

Related posts