html - css hover 分别影响单个元素而不是同时影响整个 div

Question

我想要实现的是，如果我将鼠标悬停在标题或字形图标上，整个框及其所有元素的大小应该同时发生变化。现在我必须将鼠标悬停在每个元素上，使它们的大小发生变化。

正如您在下面看到的 - 我想要的是如果我将鼠标悬停在“ Spanner ”上“bla bla bla”

也应该同时受到影响而不是 当我将鼠标悬停在 bla bla bla 上时。请帮忙这是我的 HTML 和 CSS-

.featuredBoxes {
  color: #424242;
  padding: 30px;
}

.featuredBoxes .col-1 {
  display: block;
}

.featuredBoxes .col-1 :hover {
  color: #e39329;
  transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
}

.featuredBoxes .col-2 {
  display: block;
}

.featuredBoxes .col-2 :hover {
  color: #e39329;
  transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
}

.featuredBoxes .col-3 {
  display: block;
}

.featuredBoxes .col-3 :hover {
  color: #e39329;
  transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
}

<div class="featuredBoxes">
  <div class="container">
    <div class="row">
      <!--column 1-->
      <div class="col-md-4 col-sm-4 text-center col-1">
        <div class="col-md-12 col-sm-12 call-to-action">

          <span class="glyphicon glyphicon-wrench wrench" style="font-size:100px;"></span>
          <h3>Wrench</h3>
          <p>bla bla bla</p>
        </div>
      </div>
      <!--column -2-->
      <div class="col-md-4 col-sm-4 text-center col-2">
        <div class="col-md-12 col-sm-12 call-to-action">


          <span class="glyphicon glyphicon-phone phone" style="font-size:100px;"></span>
          <h3>phone</h3>
          <p>xa xa xa</p>
        </div>
      </div>
      <!--column -3-->
      <div class="col-md-4 col-sm-4 text-center col-3">
        <div class="col-md-12 col-sm-12 call-to-action">
          <span class="glyphicon glyphicon-globe globe" style="font-size:100px;"></span>
          <h3>globe</h3>
          <p>gud gud gud</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

只需缩小 .featuredBoxes .col-1 :hover 到 .featuredBoxes .col-1:hover 的差距即可

.featuredBoxes {
  color: #424242;
  padding: 30px;
}

.featuredBoxes .col-1 {
  display: block;
}

.featuredBoxes .col-1:hover {
  color: #e39329;
  transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
}

.featuredBoxes .col-2 {
  display: block;
}

.featuredBoxes .col-2:hover {
  color: #e39329;
  transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
}

.featuredBoxes .col-3 {
  display: block;
}

.featuredBoxes .col-3:hover {
  color: #e39329;
  transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
}

<div class="featuredBoxes">
  <div class="container">
    <div class="row">
      <!--column 1-->
      <div class="col-md-4 col-sm-4 text-center col-1">
        <div class="col-md-12 col-sm-12 call-to-action">

          <span class="glyphicon glyphicon-wrench wrench" style="font-size:100px;"></span>
          <h3>Wrench</h3>
          <p>bla bla bla</p>
        </div>
      </div>
      <!--column -2-->
      <div class="col-md-4 col-sm-4 text-center col-2">
        <div class="col-md-12 col-sm-12 call-to-action">


          <span class="glyphicon glyphicon-phone phone" style="font-size:100px;"></span>
          <h3>phone</h3>
          <p>xa xa xa</p>
        </div>
      </div>
      <!--column -3-->
      <div class="col-md-4 col-sm-4 text-center col-3">
        <div class="col-md-12 col-sm-12 call-to-action">
          <span class="glyphicon glyphicon-globe globe" style="font-size:100px;"></span>
          <h3>globe</h3>
          <p>gud gud gud</p>
        </div>
      </div>
    </div>
  </div>
</div>