Увеличение площади парения для элемента внутри кнопки

Question

http://glymed-plus.mybigcommerce.com/age-management/

С правой стороны под «в центре внимания» Существует кнопка, которая говорит «Магазин сейчас>» и каретка должна изменить цвет при наведении. Если вы наведите указатель мыши на это, вы увидите проблему. Я хочу, чтобы он менялся, когда нажималась какая-то область на кнопке, а не только каретка.

Вот код:

.spotlights { 
    margin-bottom: 34px; 
} 

.half { 
    width:45%; 
    float:left; 
} 

.spotlight { 
width:45%; 
float:right; 
} 

.spotlight .btn{ 
    border: 1px solid #fff; 
    color: #fff; 
} 

.spotlight .btn:hover{ 
    border: 1px solid #fff; 
    color: #fff; 
    background-color: #4ca3c0; 
} 

.spotlight .btn em{ 
    color: #4ca3c0; 
} 

.spotlight .btn em:hover{ 
    color: #fff; 
} 

.spot { 
    text-transform: uppercase; 
    background-color: #4ca3c0; 
    padding: 5px; 
    font-size: 1.2em; 
    color: #fff; 
    letter-spacing: .1em; 
    margin-bottom: 10px; 
    margin-left: 98px; 
} 

.prodtitle { 
    color: #4ca3c0; 
    font-size: 1.2em; 
    margin-bottom: 5px; 
} 

.spotprod { 
    height:190px; 
    float:left; 
    padding-right: 25px; 
    padding-top: 5px; 
} 

Answer 1

Вы хотите изменить цвет на наведении кнопки, а не зависать em «s (что вы делаете сейчас)

.spotlight .btn:hover em{ 
    color: #fff; 
}