提问 为什么hover不生效

<div class="des3" style="width: 25%; height: 300px; float: left;background-color: #07cbc9; position: relative;">

<div class="arrow1"></div>

<div class="word2">

<div>Conference Hall</div>

<div style="font-weight: lighter;font-size: 16px;padding-top: 10px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>

<div style="font-weight: lighter;font-size: 12px; color: rgb(206, 206, 206);padding-top: 10px;">lorem Ipsum is simply dummy text of the printing and typesetting industry.lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<button class="button">EXPLORE</button>

</div>

</div>    

css

.word2 button{

border-radius: 1px;

width: 90px;

height: 40px;

border-style: none;

background-color: #000000;

color: #fff;

font-size: 12px;

margin: 10% 36%;

}

.arrow1{

position: absolute;

width: 0;

height: 0;

border-width: 15px 15px 15px 20px;

border-style: solid;

border-color: transparent transparent transparent #07cbc9;

left: 393px;

top: 135px;

}

.button:hover button{

background-color: #be2020;

opacity: 0.2;

}