HREF悬停会影响另一个HREF



我在容器内有两个元素。我希望当悬停第一个时,边界变成黄色,当悬停在第二个边界时,第一个边界再次变成黄色。

这是我的代码:

<div class="container">
    <a href="#" class="href1"></a>
    <a href="#" class="href2"></a>
</div
.href1, .href2
{
    display:block;
    width:100px;
    height:100px;
}
.href1
{
    background:red;
    border:2px solid #000;
    margin-bottom:30px;
}
.href1:hover
{
    border-color:yellow;
}
.href2
{
    background:blue;
}
.href2:hover .href1
{
    border-color:yellow;
}

我做了一个示例http://jsfiddle.net/df5dwsq8/

我不知道为什么这不起作用。如果有人能帮助我,我会很感激。

css:

.href1, .href2
    {
        display:block;
        width:100px;
        height:100px;
    }
.href1
    {
        background:red;
        border:2px solid #000;
        margin-bottom:30px;
    }
.href1:hover
    {
        border-color:yellow;
    }
.href2
    {
        background:blue;
        border:2px solid #000;
    }
.href2:hover 
    {
        border-color:yellow;
    }

这是您需要的:http://jsfiddle.net/jani11bolkvadze/df5dwsq8/1/??

最新更新