JSFiddle - React, Tailwind, and code Playground

by Reem Al Dossary

HTML

<h4>Practice Set: Basic jQuery</h4>

<div id="textBox">
<p>This assignment will give you practice with some basic jQuery capabilities. There is one task in this practice set. You have to use jQuery to make this div fade when mouse out. Use the jQuery API documentation as needed! </p>
</div>

CSS

#textBox {
	height: 120px;
	width: 300px;
	background-color: #FFF;
	border: 2px solid #CCC;
  padding: 20px;
}

.boxStyle {
  height: 120px;
	width: 300px;
	background-color:#333;
  padding: 20px;  
}

JavaScript

// your solutions here
$(document).ready(function () {
  //your code here
		$("#textBox").mouseout(function(){
  		$("p:first").fadeToggle();
 	 });
 		
    $("#textBox").addClass("boxStyle");
});