Изменить цвет текста внутри div, при наведении курсора на div

У меня есть div и текст внутри него. Когда я наводю курсор мыши на элемент div, элемент div переходит к цвету правильным образом. Я хотел бы то же самое для текста внутри, но код ниже не работает..

<div class="project-container">
  <div class="info" id="{{ product.id }}" data-color='#{{ product.color }}' data-transparencia='{{ product.transparencia }}'>
    <p class="info-texto">{{ product.texto }}</p>
  </div>
</div>

$(".info").hover(
    function() {
        $(this).stop().animate({ backgroundColor:$(this).data('color'), opacity: $(this).data('transparencia') },30);
    },function() {
        $(this).stop().animate({ backgroundColor:'transparent'},30);
    },function() {
        $('.info-texto').stop().animate({ color: "#FFFFFF" },30);
    }
);

1 ответ

Решение

Метод .hover() принимает только два аргумента, поэтому попробуйте

$(".info").hover(function () {
    $(this).stop().animate({
        backgroundColor: $(this).data('color'),
        opacity: $(this).data('transparencia')
    }, 30);
    $(this).find('.info-texto').stop().animate({
        color: "#FFFFFF"
    }, 30);
}, function () {
    $(this).stop().animate({
        backgroundColor: 'transparent'
    }, 30);
    $(this).find('.info-texto').stop().animate({
        color: ""
    }, 30);
});
Другие вопросы по тегам