文本悬停触发图像

Question

我想在公共容器中悬停文本时更改图像样式。这在整个容器悬停敏感时起作用，就像在我的小提琴中一样： https://jsfiddle.net/0hans3q5/5/

.container {
  
  width: 200px;
  margin: 20px;
}


.container:hover img {
  
  border: 2px solid red;
}

<div class="container"> 

	<a href="#"><img src="https://cdn1.medicalnewstoday.com/content/images/articles/277/277169/mouse.jpg" /></a>


<h1>header</h1>
 
 Dessert dragée biscuit croissant tootsie roll gummies marshmallow. Bear claw topping tart candy lemon drops apple pie tootsie roll marzipan. 

 <br />
 <div class="inforoller">
<a href="#">more information</a></div>

</div>

我想在将文字悬停在“更多信息”时显示边框。我试过这样：

.container {
  
  width: 200px;
  margin: 20px;
}


.inforoller:hover .container img {
  
  border: 2px solid red;
}

<div class="container"> 

	<a href="#"><img src="https://cdn1.medicalnewstoday.com/content/images/articles/277/277169/mouse.jpg" /></a>


<h1>header</h1>
 
 Dessert dragée biscuit croissant tootsie roll gummies marshmallow. Bear claw topping tart candy lemon drops apple pie tootsie roll marzipan. 

 <br />
 <div class="inforoller">
<a href="#">more information</a></div>

</div>

是否有可能只使用css来完成这项工作？我知道有js解决方案......