通过 css 中的悬停按钮扩展下划线

Question

我连续有 3 个服务，如果你将鼠标悬停在每个服务标题文本上，相应标题下的下划线会变长，我想做的是当你将鼠标悬停在按钮或标题文本上时, 线变长了。

如果可能的话，我更喜欢 css 解决方案，我已经尝试了 +（可能是错误的），但它似乎对我不起作用

<div class="row ">

  <div class="col-xl-3 col-lg-4 ">

    <em>01</em>
    <a href=""><h2>Web Design</h2> </a>
    <p>Acro Design create research led websites that make you and your business money</p>
    <button>Explore Web Design</button>
  </div>
  <div class="col-xl-3  col-lg-4 ">
    <em>02</em>
    <a href="">
      <h2>Branding </h2>
    </a>
    <p>To make a business money though design you need to firstly understand how a user uses design.</p><button>Explore Branding</button></div>
  <div class="col-xl-3  col-lg-4 "><em>03</em> <a href=""><h2>Print Design</h2></a>
    <p>Print design is about creating assets for your business, to increase your overall industry presence.</p><button class="but">Explore Print Design</button></div>


</div>

button {
  margin: 1rem 0 7rem 0;
  padding: 1.3rem;
  font-size: 1.2rem;
  font-style: italic;
  background-color: transparent;
  border: #000 solid 0.2rem;
  color: #000
}
  p {
  padding: 1rem 1rem 0rem 0;
}
em {
  display: block
}

h2 {
  text-decoration: none;
  display: inline-block;
  border-bottom: 3px solid black;
  white-space: nowrap;
  width: 6.429rem;
  transition: 0.5s ease;
  height: 5.357rem;
  color: #000;
}

h2:hover {
  border-bottom: 3px solid black;
  width: 200px;
  text-decoration: none;
}

}

http://codepen.io/saltedm8/pen/oxVNjO

谢谢问候

Answer 1

这是一支笔和解决方案：http://codepen.io/anon/pen/EKMxor。这包括 javascript ( JQuery )，但没有 css 就无法做到这一点。你可以说这是 50% 的硬件加速。

HTML:

    <div class="row ">

      <div class="col-xl-3 col-lg-4 ">

        <em>01</em>
        <a href=""><h2>Web Design</h2> </a>
        <p>Acro Design create research led websites that make you and your business money</p>
        <button>Explore Web Design</button>
      </div>
      <div class="col-xl-3  col-lg-4 ">
        <em>02</em>
        <a href="">
          <h2>Branding </h2>
        </a>
        <p>To make a business money though design you need to firstly understand how a user uses design.</p><button>Explore Branding</button></div>
      <div class="col-xl-3  col-lg-4 "><em>03</em> <a href=""><h2>Print Design</h2></a>
        <p>Print design is about creating assets for your business, to increase your overall industry presence.</p><button class="but">Explore Print Design</button></div>


    </div>
  </div>
</section>

CSS:

  p {
      padding: 1rem 1rem 0rem 0;
    }

    button {
      margin: 1rem 0 7rem 0;
      padding: 1.3rem;
      font-size: 1.2rem;
      font-style: italic;
      background-color: transparent;
      border: #000 solid 0.2rem;
      color: #000
    }

    em {
      display: block
    }

    h2 {
      text-decoration: none;
      display: inline-block;
      border-bottom: 3px solid black;
      white-space: nowrap;
      width: 6.429rem;
      transition: 0.5s ease;
      height: 5.357rem;
      color: #000;
    }
h2.active{
       border-bottom: 3px solid black;
      width: 200px;
      text-decoration: none;
}

JS :

$("h2").mouseover(function() {
  $(this).addClass("active");
});
$("h2").mouseout(function() {
  $(this).removeClass("active");
});
$("button").mouseover(function(){
  $(this).parent().children("a").children("h2").addClass("active");
});
$("button").mouseout(function(){
  $(this).parent().children("a").children("h2").removeClass("active");

});

通过 css 中的悬停按钮扩展下划线

Extend underline by hovering button in css

button

hover