Text hover triggering image

Question

I want to change a images style when hovering a text inside the common container. This works when the whole container is hover sensitive, like in my fiddle here: 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>

I would like to show the border only when hovering the text "more information. I tried it that way:

.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>

Is there a possibility to make this work just with css? I know there are js solutions....

No, that is not possible. CSS can only select downwards and to the right in the DOM. — CBroe, Mar 16 '18 at 11:56
You would have to modify the structure, so that this link comes before the container, and they are siblings (or the container could be nested deeper into a sibling as well.) For the specific visual result you want here you could probably get the link to go into the same position again using absolute positioning. — CBroe, Mar 16 '18 at 11:58

Text hover triggering image

0 Answers0