JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<div class="main">
 Текст
</div>
<div class="additional">
  Какой-то текст
</div>

CSS

.main {
  background-color: #aaa;
}
.additional {
  width: 200px;
  height: 200px;
  opacity: 0;
  background: #375;
}

JavaScript

$('.additional').on('mouseover', function() {
	$(this).animate({
  	'opacity':1
  }, 3000);
});
$('.additional').on('mouseover',function(){
	$(this).animate({
  	'opacity':0
  }, 3000);
});
$('.main').on('mouseout',function(){
	$('.main').css('height', '50px');
});
$('.main').on('mouseover',function(){
	$('.main').css('height', '150px');
});
/*
	// css
	$(СЕЛЕКТОР).css(СВОЙСТВО, ЗНАЧЕНИЕ);
	
  // событие
  $('СЕЛЕКТОР').on(ДЕЙСТВИЕ,function(){
    // ЧТО ПРОИЗОЙДЁТ
  });
*/