Как убрать подергивание при наведении на элемент?

#javascript #html #jquery #css

                    
http://jsfiddle.net/rinatoptimus/ujx8yumh/ - при наведении красный текст и картинка
мэйл ру всплывают, но если поводить курсор по красному тексту, то он начинает подергиваться.
Как это можно исправить?



$('#alpha_wrapper').hover(function() {
    $('p').toggleClass('t1 t2', 1000);
});
.grayscale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    /* For Webkit browsers */
    filter: gray;
    /* For IE 6 - 9 */
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    /* Transition for Webkit browsers */
}
.grayscale:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: none;
}
/* мой код начало */
 .grayscale {
    width:300px;
    height:200px;
    background: url(http://www.cheesetoast.co.uk/cheesepress/wp- content/uploads/2013/02/apple.png);
    no-repeat;
}
.icon {
    width: 135px;
    height: 28px;
}
.appear img {
    /*padding: 1em 0;*/
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(60%, 200px, 200px);
}
.appear:hover img {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(85px, 85px, 0px);
}
p {
    position: relative;
    margin-top: -70px;
    margin-left: 50px;
    color: red;
    width:75px;
    height:18px;
    background:green;
}
.t1 {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0%, 0, 0);
    /*transform: translate3d(60%, 200px, 200px);*/
    transform: translate3d(60%, 200px, 200px);
}
.t2 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(5px, -25px, 0px);
}

    

    
    
    
dhdfghdfgh






    

Ответы

Ответ 1

 перекрывает #alpha_wrapper, поэтому #alpha_wrapper теряет hover, так как 

не находится внутри него.

Можно, как в следующем варианте, отключить обработку событий для 
, но тогда для
него не будет работать, к примеру, hover.

Также можно обойтись без JS, ведь в CSS есть селектор для последующего элемента:
#alpha_wrapper:hover + p {