Изменить цвет текста внутри 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);
});