css - CSS 翻转 1 div 和另一个 div 更改

Question

我的客户想要的是，当您将鼠标悬停在浅橙色上时，它会变成深橙色，这很容易，但是当您到达按钮的中心并将鼠标悬停在深橙色上时，它会变成浅橙色（这就是我我很难相处..请指教

<a href="#"><div class="buttonblue">
<div class="buttontitle">local businesses</div>
<div class="buttonaction_blue">NEXT</div>
<div class="buttonsmallprint">Leverage online</div>
</div></a>

css

.buttontitle { 
 font-family: 'BebasNeueRegular', Arial, sans-serif;
 letter-spacing: 0;
 padding:4px 0px 4px 0px;
 font-size:36px; 
 color:#fff;
 text-align:center;
 } 
 .buttonaction_blue:hover
  {
    background-color:#418dc7
  }  
  .buttonaction_blue 
 {
  width:355px; 
  margin:0 auto;
  background-color:#4795d1;
  -webkit-border-radius: 2px; 
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-family: 'Oxygen', sans-serif; 
  font-size:32px; 
  text-align:center;  
  color:#fff;
  padding:10px 0px 10px 0px; 
  }  

Answer 1

你说

"What my client wants is when you hover over the light orange it changes to the dark orange"

如果您想要浅橙色（在您的示例中即提供的蓝色）变为深色并且深橙色没有变化然后替换它

.buttonaction_blue:hover
{
background-color:#418dc7
} 

和

.buttonblue:hover
{
background-color:#5BCAE9;
} 

或如果您想要浅橙色（在您的示例中为蓝色，即提供）更改为深橙色，深橙色更改为浅橙色，然后添加此

 .buttonblue:hover
{
background-color:#418dc7;
} 

jsfiddle

Answer 2

看起来您只是想将 :hover 堆叠在 div 上：

http://jsfiddle.net/tSZ2u/1/

.buttonaction_blue:hover {
     background-color:#5BCAE9
}

.buttonblue:hover {
     background-color: #4795d1;
}

如果向 bluebutton 和 buttonaction_blue 添加悬停可以解决问题，那就太好了。如果没有，则项目的父级没有 CSS 选择器（此时）。您需要使用 .parent() 查看一些 jQuery：http: //api.jquery.com/parent/