0

i have two elements inside a container. i would like when hover the first the border becomes yellow and when hover the second the border of the first becomes yellow again.

here is my code :

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

i made an example http://jsfiddle.net/df5dwsq8/

i dont know why this is not working. if someone could help me i would appreciate it.

DMande
  • 321
  • 1
  • 7
  • 18
  • 3
    "*[I don't] know why this is not working*" - it's not working because there's no way, in CSS, to select a previous sibling (or parent) element of the current element; and your selector: `.href2:hover .href1` would select an element of class 'href1' within a hovered-element with the class of 'href2,' which doesn't match your HTML. – David Thomas May 18 '15 at 10:36
  • i understand now.. so the only way to achieve this is javascript? – DMande May 18 '15 at 10:40
  • Yes, JavaScript's required for this. – David Thomas May 18 '15 at 10:41
  • You need jQuery or javascript to do this – Andrew May 18 '15 at 10:41
  • thanks a lot! and sorry for the duplicate question – DMande May 18 '15 at 10:42

1 Answers1

0

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

Is this what you need: http://jsfiddle.net/jani11bolkvadze/df5dwsq8/1/ ??

  • no i want when hover the second (blue), then first' s border-color becomes yellow – DMande May 18 '15 at 10:39
  • use this script $(".href1").hover(function(){ $(".href2").css("border", "2px solid yellow"); }); – K3V May 18 '15 at 10:49