0

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
6
Views
6 Years
Discussion Span
Last Post by stbuchok
0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.