Background/text color on hover change problem

• 

  fairfieldflyfins · Member · Oct 20, 2015 at 2:16 pm

  • Copy link
  • Add topic to favorites

  On my homepage on the right side of the page in the secondary sidebar widget section, I have a “practice schedule” text box that should change background color and when the text is hovered over the text should change color. The text doesn’t change color? Also, is there anyway to prevent the left side of the boxes shadow from being cut off (the html is in a text widget), i have tried sizing it down but it still seems to cut the shadow slightly on the left?
  CSS Code:

  .background-switch {
    text-align: center;
    padding: 2em;
    max-width: 150px;
    font-size: 1.2em;
    border-radius: 30px;
    background-color: #bac0b2;
  border: 1px solid #bac0b2;
  	border-radius: 5px;
  	-moz-border-radius: 5px;
  	-webkit-border-radius: 5px;
  	-webkit-box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.75);
  	-moz-box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.75);
  	box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.75);
  
  }
  .background-switch:hover {
    background-color: #e7e5ca;
    color: #800000;
  
  }

  HTML Code:

   
  <p class="background-switch" style="text-align:center;"><a style="color:#ffffff;" href="http://flyfins.org/practice-schedule-revised/">Practice Schedule</a></p>
  &nbsp;

  The blog I need help with is: (visible only to logged in users)

• 

  ehtis · Staff · Oct 20, 2015 at 4:49 pm

  • Copy link

  Hi there,

  This should fix the text hover issue. Add at the end:

  .background-switch a:hover {
    color: #800000 !important;
  }

  As for the shadow being cut, let’s move the widget a bit to the right:

  #text-6 .textwidget {
      margin-left: 15px;
  }

  Using these box-shadow values will distribute the shadow evenly, give it a try:
  box-shadow: 1px 5px 15px 0px rgba(0,0,0,0.75);

• 

  fairfieldflyfins · Member · Oct 21, 2015 at 12:47 am

  • Copy link

  These changes worked…thank you!

• 

  ehtis · Staff · Oct 21, 2015 at 7:45 am

  • Copy link

  Glad they did, happy blogging!