Html 在drupal中未触发CSS3转换

我正在使用Drupal7，并试图让这个简单的悬停转换正常工作。我相当肯定代码是好的，因为当我独立测试它时，它可以正常工作。无论何时我将它插入Drupal，它都会像预期的那样出现，但我在hover上没有得到任何转换。当我检查元素时，所有代码都在那里。我已经关闭了Drupal的ACF，所以它不会改变我的代码。它的行为就像无法读取hover语句一样

这是我的

我错过了什么？任何建议都将不胜感激

<div class="hapcontain">
    <div class="haplet-h">
        <img src="/sites/default/files/happy-h.png" width="40px" height="40px" /></div>
    <div class="hapbar-h">
        <span class="haphead">Habits:</span> <span class="hapbody">learning and sharing lead to innovation</span>
    </div>
</div>

<div class="hapcontain">
    <div class="haplet-a">
        <img src="/sites/default/files/happy-a.png" width="40px" height="40px" /></div>
    <div class="hapbar-a">
        <span class="haphead">Attitudes:</span> <span class="hapbody">business conducted with integrity and respect</span>
    </div>
</div>


.hapcontain{
    overflow:hidden;
    height: 60px;
    margin-bottom:5px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    border-radius: 40px;
}

.haplet-h,.haplet-a,.haplet-p1,.haplet-p2,.haplet-y{
    position: relative;
    top: 0;
    background:#3759A4;
    border:3px solid #ABCDE8;
    width:20%;
    max-width:50px;
    padding:5px 2px;
    text-align:center;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    border-radius: 40px;
    z-index: 1;
}

.hapbar-h, .hapbar-a, .hapbar-p1, .hapbar-p2, .hapbar-y{
    position: relative;
    top: -60px;
    left:-400px;
    padding:5px 15px 0 65px;
    height:49px;
    max-width:295px;
    background-color:#ABCDE8;
    border:3px solid #3759A4;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    border-radius: 40px;
    z-index: -1;
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s;
}

.haplet-h:hover + .hapbar-h{left:0;}
.haplet-a:hover + .hapbar-a{left:0;}
.haplet-p1:hover + .hapbar-p1{left:0;}
.haplet-p2:hover + .hapbar-p2{left:0;}
.haplet-y:hover + .hapbar-y{left:0;}

.haphead{font-weight:bold;
    color:#222156;
}

.hapbody{text-decoration:none;
    color:#FFFFFF;
}

---

当您将标记放入Drupal中时，您的标记会有所不同，例如“hapbar-h”不会直接跟随“haplet-h”，或者您在上面显示的样式下面包含了CSS，该样式覆盖了悬停事件。你能对两者都做一个快速检查吗？我检查过了，顺序很好，没有被覆盖，但是我添加了这个。haplet-h:hover{background:0000FF；}为了测试悬停状态，它工作得很好。这些样式显示在inspector中，但hapbox-*不会移动/显示。我已经解决了。这是z指数。该部队躲在BG img后面。换句话说。。。我是个白痴。无论如何，谢谢你的帮助。