当鼠标悬停时，更改div内文本的颜色

Question

我有一个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);
    }
);

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