Add a rollover style to a child in a brother element

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">
    <a href="URL">CLICK</a>
  </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?


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>