html - 悬停在多个元素上时颜色变化

Question

我想对图标、文本和按钮(从上到下)应用所有悬停颜色变化效果。目前，悬停是单独工作的，文本和图标或按钮正在改变颜色。

这是代码和一个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">
       <a href="#">Read More</a>
      </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;
    }

编辑: 尽管一些答案在 jsfiddle 上有效，但到目前为止，它们都没有在实时站点上起作用。我正在从中粘贴更新的 HTML 代码结构，因为上面的只是一个示例。也许这将有助于解决这个问题。谢谢!

    <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

请试试这个，

.col-1-left:hover * {
   color: white;
}