There are many times when we need to toggle the class dynamically.
Some time for changing the css.
Some time for adding html.
Some time to display html.
Some time to change dom.
That is all depend on your need. Now here I have tried to gave you example of how you can change the style of another div or header by hover on the other.
You can chose to have click function or any other like mouseleave mouseenter any which is required to your need.
Remember to have include the jquery path.
When you hover on header the color of body change and when you hover on body the color of header change.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
height: 400px;
width: auto;
background-color: red;
}
h1{
height: 40px;
width: auto;
background-color: blue;
}
.blue{
color: blue;
font-style: italic;
font-size: 20px;
background-color: black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".color").hover(function(){
$(".background_data").toggleClass("blue");
})
$(".background_data").hover(function(){
$(".color").toggleClass("blue");
})
});
</script>
</head>
<body>
<h1 class="color">This is the header</h1>
<div class="background_data">This is the body</div>
</body>
</html>
0 Comment(s)