CppBuzz.com
  
Home C C++ Java Python Perl PHP SQL JavaScript Linux Online Test Forum

Home » Forum » x-Forum » Question

Problem:It should be mouseover, 2 red box and 1 box for black...Black box should go in 2nd box or 3rd box and so on...

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Boxes</title>
	<style type="text/css">
		div.box-container {
			width:1000px;
			display: flex;
			align-content: space-between;
			margin-right: auto;
			margin-left:auto;
			background-color: #eee;
		}

		div.box-container > div.box {
			width:333.33px;
			height:333.33px;
			flex:1;
			background-color:red;
			border:1px solid #000;
		}

		div.box-container > div.box.color {
			background-color:#000;
		}
	</style>
</head>
<body>

	<div class="box-container">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>

	<script type="text/javascript">
		
		var boxes = document.getElementsByClassName('box');
		var currentBox = 1; 

		

		var index = currentBox; 



		

		for (var i = 0; i < boxes.length; i++) {
			
			boxes[i].addEventListener('mouseover', function (e) {
				console.log('mouseover event');
				
			});
		}


		
		function addBoxColor (boxIndex) {
			
			console.log('adding color to the box');
		}


	
		function removeBoxColor (boxIndex) {


			console.log('removing box color');
		}

		

	</script>
</body>
</html>

Posted by Ravelo 2018-12-08 18:37:05

No Ans Posted

Please login to comment

Log In


Ask New Question