I've successfully implemented this code in jsfiddle, but I'm struggling to make it work on my local files like index.html, index.css, index.js. Can someone please guide me on how to achieve this locally and not just on jsfiddle? Here's the jsfiddle: http://jsfiddle.net/Naush/Cr7GK/
Here is my envisioned local implementation:
Html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="black"></div>
<div class="orange"></div>
</body>
</html>
Css:
.black {
position:absolute;
height:100px;
width:200px;
background-color:gray;
}
.orange {
display:none;
position:absolute;
height:100px;
width:100px;
background-color:orange;
left:200px;
}
Javascript:
$(document).ready(function () {
$(".black").hover(function () {
$(".orange").toggle();
})
})
I suspect there might be an issue with how I'm including something in the html head tag. The file paths are correct. Any help would be greatly appreciated!