How to remove the hover effect [color] of highlighting the Blocks on front page?

• #101093

  
  Sammer
  

  On March 6, 2014 at 6:22 am

  Hello Towfiq ,
  As my title says , how to remove the hover effect [color] of highlighting on Blocks on front page?

  I.e. When i bring the mouse over one of the 4 blocks on front page , the background color of that block on which the mouse is brought changes to green . I want to remove that green background effect so that no background color will be seen .

  Please see this image for more details – http://imgur.com/D3cs7PX

  Thanks
  Awaiting your reply

  #101397

  
  Towfiq I.
  

  administrator

  On March 6, 2014 at 8:36 pm

  Add this to the very bottom of your Stylesheet:

  body .midrow_block:hover{color:#999!important; background:none!important;}

  #101543

  
  Sammer
  

  On March 7, 2014 at 5:26 am

  Thanks for the fast reply Towfiq 🙂
  That fixed it !

  #111398

  
  Kaarina
  

  On March 27, 2014 at 10:25 am

  Hi Towfiq!

  I blocked hovering from the midrow but titles change color anyway. Any thoughts?
  http://www.tapiolanratsastuskoulu.net/wordpress/

  Thanks,
  Kaarina

  #111646

  
  Towfiq I.
  

  administrator

  On March 27, 2014 at 10:10 pm

  Add this to your stylesheet:

  .midrow_block:hover h3{color:#333!important;}
  

  #439950

  
  beth olson
  

  subscriber

  On January 14, 2015 at 10:35 pm

  Just wanted to add real quick that if you want to keep the color rollover effect but remove just the jump/bounce effect of the front page midrow block rollovers I did this by going to wp-content>themes>Asteria>Asteria.js

  Find this bit of code:

  	//Block Animation
  if (jQuery(window).width() > 480) {
  	jQuery('.midrow_block').hover(function(){
  	jQuery(this).stop().animate({ "color":sechovertext, "backgroundColor":sechover, "paddingTop":"0px" }, 200);
  	jQuery(this).find('.icon_wrap i').animate({ "color":sechovertext }, 200);
  	jQuery(this).find('.midrow_block:hover .block_img').animate({ "borderColor":sechovertext }, 200);
  	}, function(){
  	jQuery(this).stop().animate({ "color":primarytext, "backgroundColor":"transparent", "paddingTop":"2%" }, 200);	
  	jQuery(this).find('.icon_wrap i').animate({ "color":"rgba(0, 0, 0, 0.15)" }, 200);
  	jQuery(this).find('.midrow_block:hover .block_img').animate({ "borderColor":"rgba(0, 0, 0, 0.15)" }, 200);
  	});
  	}

  Remove the “paddingTop”:”0px”
  this will keep the color roll over but remove how it jumps on rollover.