Color change on hover over multiple elements - html

Question

I want to apply one for all hover color change effect on the icon, text and button(top to bottom). At the moment hover is working separately either text and icon or button is changing color.
here is the code and also a fiddle
<div class="col-1-left">
<div class="content">
<div class="icon">
<img src="#" />
</div>
<div class="text">
<h4>
Title text
</h4>
</div>
</div>
<div class="button">
Read More
</div>
</div>
.col-1-left {
width: 100%;
background: #555;
padding: 10px;
margin: 0;
color: red;
}
.col-1-left:hover {
color: white;
}
.button a {
color: #000;
}
.button a:hover {
color: white;
}
EDIT:
Although some of the answers worked on jsfiddle, none of them worked so far on live site.. I am pasting updated HTML code structure from it as the one above was only a sample. Maybe that will help sorting this issue out. Thanks!
<div class="et_pb_column et_pb_column_1_3 col-1-left et_pb_column_93 cboxElement">
<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center mp_m_blurb_pulse fins-color-aqua et_pb_blurb_50 et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image">
<span class="et-pb-icon et-waypoint et_pb_animation_off et-animated" style="color: #28375c;">?</span>
</div>
<div class="et_pb_blurb_container">
<h4>Title</h4>
<h5>Subhead</h5>
</div>
</div>
</div>
<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_button_26 et_pb_module et_pb_bg_layout_dark" href="#">Find Out More</a>
</div>
</div>

Answer 1

Please Try this,
.col-1-left:hover * {
color: white;
}

Answer 2

I did a code snippet for you. Please try it and confirm it is what you need.
The thing is that you need to add the hover effect to the parent, i.e. .col-1-left in order to be able to change the color to its children elements.
.col-1-left {
width: 100%;
background: #555;
padding: 10px;
margin: 0;
color: red;
}
.col-1-left:hover, .col-1-left:hover .button a {
color: white;
}
.button a {
color:#000;
}
<div class="col-1-left">
<div class="content">
<div class="icon">
<img src="#" />
</div>
<div class="text">
<h4>Title text</h4>
</div>
</div>
<div class="button">
Read More
</div>
</div>