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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -