Jquery教程：悬停/单击时切换效果

Posted 2021-02-25

<h2>Move Cursor</h2>
<div class="togglebox">
<div class="content">
<h3>Content Here</h3>
<!--Content Here--></div>
</div>
 
 
 
Step 2 : Styling Our html Document
 
Now we need to style our html elements like heading, togglebox and content. See the codes below.
 
 
h2 {
	padding:10px;
	font-size:20px;
	color:#243953;
	background-color:#fafafa;
	border: 1px solid #a9a9a9;
	-moz-border-radius: 7px; /* Rounder Corner */
       -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin-bottom:5px;
}
.togglebox {
	background-color:#CCC;
	border: 1px solid #a9a9a9;
	/* Rounder Corner */
	-moz-border-radius: 7px;
        -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	overflow: hidden;
	font-size: 1.2em;
	width: 295px;
	clear: both;
	margin-bottom:10px;
}
.togglebox .content {
	padding: 20px;
}
 
 
 
 
 
Step 3 : Jquery Time
 
Create a new JS file and then Link Jquery and new js file to Html document
 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="toggle.js" type="text/javascript"><!--mce:1--></script>
 
 
Now to give some smoth toggle effect we need to write some simple jquery code to give it a life. Below are the codes with explanation.
 
 
 
 
Toggle Effect On Hover
 
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when hover over heading 2
$("h2").hover(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});
 
 
 
 
Toggle Effect On Click
 
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});