Add hover style to a child in a sibling element - html

Question

I have some HTML/CSS that looks something like this:
#left a:hover img {
border: 5px solid red;
}
<div id="information">
<div id="left">
<a href="URL">
<img src="IMG">
<span id="button">CLICK</span>
</a>
</div>
<div id="right">
CLICK
</div>
</div>
I want to make it so that when you hover over either link, a CSS rule is applied to the image in left. I can get the link on the left, but not the right.
I want to make it so that all hovering over any links in "#information" will apply this rule to any image that fits "#information #left a img". What's the best way to do this? Is there a way to do it in one line?

Answer 1

We weren't able to figure out how to do this with exclusively CSS, therefore see below for a jquery alternative.
(function(){
$('#information').find('a').each(function(i, element){
$(element).mouseover(function(){
$('#left img').addClass("hoveredThing");
});
$(element).mouseleave(function(){
$('#left img').removeClass("hoveredThing");
});
});
}());
.hoveredThing { border:5px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="information">
<div id="left">
<a href="URL">
<img src="img" >
<span id="button">CLICK</span>
</a>
</div>
<div id="right">
<a href="URL">
CLICK
</a>
</div>
</div>

Answer 2

This doesn't work because of the structure of your html. You are saying to select the img inside the hovered "a" tag. You need the img outside of the "a" and use a sibling selector.
A fiddle
https://jsfiddle.net/05jwnw7v/
#information a:hover~img{border: 1px solid red;}
<div id="information">
<div id="NewContainer">
CLICK
<a href="URL">
<span id="button">CLICK</span>
</a>
<img src="IMG" >
</div>
</div>

Answer 3

try this
#information div a:hover img{border:5px solid red;}