通过在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

谢谢 REGARDS

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"); 

});