CSS3过渡不会在drupal中触发

Question

我正在使用Drupal 7，并试图让这个简单的悬停过渡工作。我相当肯定代码很好，因为它在我独立测试时起作用。每当我将其插入Drupal时，它都会按预期显示，但我在悬停时没有转换。当我检查元素时，所有代码都在那里。我关闭了Drupal的ACF，所以它没有改变我的代码。它表现得好像无法读取悬停声明。

这是我的http://jsfiddle.net/Zod_42/n4y022ha/8/

我错过了什么？任何建议表示赞赏。

<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;
}