1

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: 

.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.

user2314737
  • 21,279
  • 16
  • 81
  • 95
MarcEvers
  • 11
  • 2
  • Can you please make a screenshot? What version of chrome are you testing, at the moment on chrome version 46.0.2490.80 m I can see an image when mouse hover the menu. – GibboK Nov 09 '15 at 15:09
  • It looks Webkit/Chrome has a bug when using :hover and sibling selectors together. See this other [question](http://stackoverflow.com/questions/8320530/webkit-bug-with-hover-and-multiple-adjacent-sibling-selectors) for a possible workaround. – marcochiesi Nov 10 '15 at 18:00

0 Answers0