CSS3转换触发器无法正常工作

Question

我试图制造一种情况，当一个元素悬停在一起时，一个不同的元素被转换。我通常使用下面的确切代码，它工作正常，但这次有些错误。

CSS

#sidebar {
    width:300px;
    height:100%;
    position:fixed;
    top:0px;
    padding:10px;
    left:0px;
    background:#fff;
    font-style:none;
        -webkit-transition: width 2s;
        transition: width 2s;
    z-index:1;

}

#sideimage {
    max-width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #111;
    position: absolute;
    top: 290px;
    left: 25%;
    }

#sideimage:hover #sidebar {
    width: 700px;
}

如果有人能告诉我我做错了什么或给了我另一个解决方案，那将非常感激。

Link to the page

Answer 1

你的CSS没有多大意义。 #sideimage是#sidebar的孩子，因此#sideimage:hover #sidebar将无法正常工作。 没有javascript，您无法根据子事件更改父元素。 您应该向我们提供有关您要实现的目标的更多详细信息。