Recently, I started learning jQuery and building my own website. You can find my project on JSFIDDLE. The issue I'm facing is that when hovering over a new div, the text extends beyond the borders of that div instead of staying within it. I've spent over an hour trying to fix this seemingly simple problem but haven't been successful. Any help would be appreciated.
Here's the code snippet:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8>
<title></title>
<script src="example.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box">
<h2 id='name'> Karan Shah </h2>
<div id='innerbox'><span><h4 id='emptyInfo'></h4></span><div>
<script>
$('#innerbox').hide();
</script>
</div>
<script>
$('#name').css('color','black');
$('#name').css('text-align','center');
$(document).ready(function () {
var originalText = $('#name').text();
var tOut;
$("#box").hover(
function () {
tOut = setTimeout(function(){
$('#innerbox').show('slow',function(){
$('#emptyInfo').fadeOut(400, function () {
$(this).text('Welcome to my website').slideDown().css('text-align','center');
});
});
},1000);
},
function(){
clearTimeout(tOut);
$('#innerbox').hide('slow',function(){
$('#emptyInfo').hide('slow');
});
}
);
});
</script>
</body>
</html>
The CSS styles used are:
#box {
background-color: lightgrey;
width: auto;
padding: 25px;
margin: 25px;
}
#emptyInfo{
font-size: 150%;
}
#innerbox {
background-color: white;
width: auto;
height: 30px;
border-radius: 10px;
border : 1px;
border-style: solid;
border-color: darkgrey;
}