Member Avatar for Behseini

Hi everyone,

I am am trying to change the "display" property of a div from "none/block" to normal in order to display it on mouseover event.But I do not know why it is not working!
Can you please take a look at following spinets and let me know what I am doing wrong here?

Here is the html code

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MouseOver On Hiden Object</title>
<script type="text/javascript" src="jquery.min.js"></script> 
<style type="text/css"> 
body {
	background: #fff;
	color: #000;
}
#main{
	height:600px;
	width :600px;
	background-color: yellow;
}
#left { 
	float:left;
	position:relative;
	height: 100%;
	width: 50%;
	background-color:green;
}
#right { 
	display:none;
	float:right;
	position:relative;
	height: 100%;
	width: 50%;
	background-color:red;
 }
</style> 
</head>

<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>

and these are the jquery codes which I used to do this but none of them was able to change the property assignment

<script type="text/javascript">
$(document).ready(function() {
     $("#right").hover( function() {
        //mouse over
        $(this).css("display", "normal");  
    }, function() {
        //mouse out
        $(this).css('display', "none")
    });
});
</script>

and

<script type="text/javascript">
$(document).ready(function() {
  
    $("#right").hover( function() {
        //mouse over
        $(this).next().show('#right'); 
    }, function() {
        //mouse out
        $(this).next().hide('#right'); 
    });
});
</script>

I appreciate your time in advance!

  • 2 Contributors
  • 1 Reply
  • 225 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by stbuchok
Member Avatar for stbuchok

Notice the curly brackets in the css() method.

However your example should still not work. If your div is hidden (display: none) how is the mouse over event supposed to fire? There is nothing there to mouse over so the event shouldn't fire to display it (almost positive on this).

<script type="text/javascript">
$(document).ready(function() {
     $("#right").hover( function() {
        //mouse over
        $(this).css({display: 'block'});  
    }, function() {
        //mouse out
        $(this).css({display: 'none'})
    });
});
</script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.