大家帮忙看下我这个hover选择器出了什么问题？

Question

<el-col :xs="24" :sm="24" class="introduce">
<el-col :xs="24" :sm="6" class="a">
            <div class="intro"><p>dadaaaaaaaaaaaaaaaaaaaaaaaaa</p><br>aaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaa</div>
          </el-col>
</el-col>

CSS部分

  .introduce{
    position: absolute;
    top:930px;
    width:80%;
    left:50%;
    margin-left:-40%;
    background-color: white;
    box-shadow: 0 14px 30px rgba(0,0,0,0.1);
  }
  .intro{
    height: 400px;
    background-color: red;
    margin-top: 25px;
    margin-bottom:25px;
    border: 1px solid rgba(0,0,0,0.07);
    transition: all 0.2s;
    text-align: center;
  }
  .a  :hover {
    border-color:#74d7a5;
    box-shadow:4px 4px 0px #74d7a5 inset, -4px -4px 0px #74d7a5 inset
  }

我只想有一图片的效果，不想有二图片的效果该如何修正？

Answer 1

.intro:hover {
    border-color:#74d7a5;
    box-shadow:4px 4px 0px #74d7a5 inset, -4px -4px 0px #74d7a5 inset
}

.a:hover {
    border-left: 4px solid red;
    border-right: 4px solid red;  
}

其他样式不变.