a href hover влияет на другой a href

Question

У меня есть два элемента внутри контейнера. Я бы хотел, чтобы при наведении на первую границу граница становилась желтой, а при наведении второй границы первой становится желтой.

вот мой код:

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

я не знаю, почему это не работает. если бы кто-то мог мне помочь, я был бы признателен.

Answer 1

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/ ??