当鼠标悬停在按钮上时，CSS转换为div

Question

所以我发现了一些css来进行径向外转换（http://ianlunn.github.io/Hover/）。这个css最初是用于按钮的。我想把它应用到整个div。这没问题，因为我可以把这个类给一个div。但是，如果将鼠标放在div中的任何位置，则转换开始。 div内还有一个按钮。当你将鼠标悬停在按钮上时，我想开始转换只是我不知道如何实现这一目标。是否有人可以把我推向正确的方向？

Div代码：

        <div id="intro"> 
        <div class="hvr-radial-out">
            <div class="row">
                <div class="col-lg-12"><p align="center"><img src="img/logo-full.png" class="img-responsive" alt="Logo Full"></p></div>
                <div class="col-lg-12"><p align="center"><a href="" class="btn-intro btn-outlined-intro btn-theme-intro" data-wow-delay="0.7s">Ontdek!</a></p></div>
            </div> 
        </div>       
    </div>

转换代码：

.hvr-radial-out {
height:100vh;
width:100vw;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
background: #ffffff;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-radial-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #e1e1e1;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {
color: white;
}
.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before {
-webkit-transform: scale(2);
transform: scale(2);
}

按钮代码：

btn-intro {
letter-spacing: 1px;
text-decoration: none;
background: none;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
white-space: nowrap;
font-size:14px;
line-height:20px;
font-weight:700;
text-transform:uppercase;
border: 3px solid;
padding:15px 20px;
}
 .btn-outlined-intro {
border-radius: 0;
-webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
        transition: all 0.3s;
}
.btn-outlined-intro.btn-theme-intro {
background: none;
color: #000000;
border-color: #000000;
width:220px;
}
.btn-outlined-intro.btn-theme-intro:hover,
.btn-outlined-intro.btn-theme-intro:active {
color: #FFFFFF;
background: #000000;
border-color: #000000;
}
.btn-sm-intro{
font-size:12px;
line-height:16px;
border: 2px solid;
padding:8px 15px;
}