Wordpress自定义css菜单悬停在chrome中的问题

时间:2015-11-09 10:48:24

标签: css wordpress google-chrome menu

我正在尝试修复网站http://www.cleanflowfilter.nl/上的错误。 这个网站的屏幕左侧有一个菜单,巫婆应该在菜单项上悬停时显示一张图片,当你鼠标移出时当然不再显示图片了。 除了chrome之外,这个实际适用于所有浏览器。我真的找不到问题...

用于效果的代码如下:

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

希望有人可以帮助我! 提前致谢。

0 个答案:

没有答案