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;
}

Answer 2

我为你做了一段代码片段。请尝试并确认它是您需要的。

问题是您需要将悬停效果添加到父级，即.col-1-left，以便能够将颜色更改为其子元素。

.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">
    <a href="#">Read More</a>
  </div>
</div>

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

2 个答案: