javascript - changing the color ov two div's -
i working script mouseover
menu item , change background color , change color of div @ timing of 2000. can help? in advance.
$(document).ready(function() { $(".block-menu").mouseover(function() { $(this).css({'background-color' : '#97d8e6'}).mouseout(function(){ $(this).css({'background-color' : '#43bdcb'}); }); $(".sections1").css({'background-color' : '#97d8e6'}).mouseout(function(){ $(this).css({'background-color' : '#43bdcb'}); }); }); });
to (2000ms) .animate()
background of element you'll either need jquery ui or dynamically toggle classes (using jquery) uses css3 transition
- in order apply fancy fade background transition:
$(document).ready(function() { $(".block-menu").hover(function() { $(this).toggleclass("jqhover"); // $(".sections1").toggleclass("someclass"); }); });
.block-menu{ height:200px; background: #43bdcb; transition: background 2s; /* or use: 2000ms */ } .block-menu.jqhover{ /* classs toggled jquery on hover */ background: #97d8e6; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block-menu">hover me animate bg lighter color</div>
the above uses jquery cause suppose want $(".sections1")
since in css can target child elements or next siblings... otherwise, can use css:
.block-menu{ height:200px; background: #43bdcb; transition: background 2s; /* or use: 2000ms */ } .block-menu:hover{ background: #97d8e6; } .block-menu:hover .somechild{ background: red; } .block-menu:hover + .nexttoblock-menu{ background: blue; } .block-menu:hover ~ .allnextsiblingstoblock-menu{ background: blue; }
without jquery.
Comments
Post a Comment