Почему при наведении на 2 блок ничего не происходит?

Question

[AhmedGasem]

https://jsfiddle.net/ut955zsk/1/
css:

.tonight{
    width: 310px;
    height: 78px;
    background-color: #73b52a;
    color:white;
    padding:8px 20px 15px;
    line-height: 18.54px;
}
.recommend{
    font-size:12px;
    font-weight: bold;
    
}
.on-tv{
    font-size:22px;
    font-weight: bold;
}
.rating{
    width: 170px;
    height: 78px;
    margin:-78px 310px;
    background-color: #ffffff;
    color: #73b52a;
    font-size: 50px;
    font-weight: 700;
    padding:5px 20px;
}
.we-recommend{
    width:494;
    height:78px; 
    margin-top:250px;
}
.we-recommend:hover .tonight{
        color:#73b52a;  
    background-color:#ffffff;
    transition-duration:1s;
}
.we-recommend:hover .rating{
    color:#ffffff;
    background-color: #73b52a;
    transition-duration:1s;
}
.we-recomend-2{
	float;left;
	margin-left:500px;
	margin-top: -78px;
}
.we-recommend-2:hover .tonight{
    color:#73b52a;  
    background-color:#ffffff;
    transition-duration:1s;
}
.we-recommend-2:hover .rating{
    color:#ffffff;
    background-color: #73b52a;
    transition-duration:1s;
}

HTML:

<div class="we-recommend">
    <div class="tonight">
        <p>
            <span class="recommend">Мы рекомендуем</span><br>
            <span class="on-tv">Сегодня вечером по телевизору</span>
        </p>
    </div>
    <div class="rating">
        <p>28.11</p>
    </div>
</div>
<div class="we-recomend-2">
    <div class="tonight">
        <p>
            <span class="recommend">Мы рекомендуем</span><br>
            <span class="on-tv">Завтра вечером по телевизору</span>
        </p>
    </div>
    <div class="rating">
        <p>29.11</p>
    </div>
</div>

Answer 1

[Alex]

Проверьте имена классов и стили
p.s. может где то букву пропустили, где то единицы измерения...