Change other div on hover

Question

JSFIDDLE
HTML

<div id="container">
    <a href="#">
        <div class="hover">
            <div class="imgdiv"></div>
       </div>
    </a>
    <div class="imgdiv_2">
    </div>
</div>

CSS

#container{
    width:250px;
    height:250px;
    border:1px solid black;
}
a{
    height:250px;width:250px;
}
.hover{
    height:250px;
    width:250px;
    position:absolute;
    z-index:1;
}
.hover:hover > .imgdiv{
    opacity:0.5;
    height:300px;
}
.hover:

hover + .imgdiv_2{
    width:4300px;
}
.imgdiv{
    height:250px;
    width:250px;
    background-color:red;
    opacity:0;
}
.imgdiv_2{
    width:300px;
    height:250px;
    background-color:black;
    opacity:0.1;
}

I have a problem with this part:

hover + .imgdiv_2{
    width:4300px;
}

How can I change .imgdiv_2 when I hover .hover
Is this even possible in CSS only?
I can not change the HTML structure or the 250px width.
Is there a way I can select the entire css path from the body?

Answer 1

You can't because CSS selectors can target only an element's descendants or followed siblings... That's how CSS works.

But on your scenario, since the a tag is a sibling to the .imgdiv_2, you can set the :hover on it:

a:hover + .imgdiv_2{
    width:4300px;
}

Maybe narrowing it by adding a class to the a tag...

Updated Fiddle

Answer 2

If you want to use sibling selector, two elements must be siblings :)

I edited your html:

<div id="container">

    <div class="hover">
        <div class="imgdiv"></div>
   </div>

<div class="imgdiv_2">

</div>

Here is working fiddle