css悬停分别影响单个元素，而不是同时影响整个div

Question

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

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

也应该同时影响效果而不是  当我将鼠标悬停在bla bla bla上时。请帮忙 这是我的HTML＆amp; 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

将差距<script> $(document).ready(function () { $("[id$='txtstartDate']").datepicker(); $("[id$='txtFinishDate']").datepicker(); }); </script> 缩小至.featuredBoxes .col-1 :hover

＆＃13;

＆＃13;

.featuredBoxes .col-1:hover

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;