Изменение hover для элементов

[alex.kv]

День добрый! Есть следующий участок макета:

http://c2n.me/3a3Bzoo

вот код которым я его сверстал:

html

<section><article><div class="container"><div class="row"><div class="col-sm-12"><h2>summarise the features</h2><h3>summarise what your product is all about </h3><div class="col-sm-3"><div class="block"><a href="#"><p>Attractive Layout</p></a></div></div><div class="col-sm-3"><div class="block"><a href="#"><p>Fresh Design</p></a></div></div><div class="col-sm-3"><div class="block"><a href="#"><p>multipurpose</p></a></div></div><div class="col-sm-3"><div class="block"><a href="#"><p>Easy to customize</p></a></div></div></div></div></div></article></section>

css

section article .block a {	border: 4px solid #efefef;	display: table-cell;	vertical-align: middle;	text-align: center;	width: 160px;	height: 160px;	background: #4BCAFF;	border-radius: 50%;	position: relative;}section article .block a p {	color: #414042;	font: bold 15px "lato", sans-serif;	position: absolute;	top: 180px;	left: 25px;}section article .block a:hover {	background: #414042;}

Получилось вроде не плохо http://c2n.me/3a3BHgc

Но никакой не могу понять как сделать чтобы при наведение на круг изменялся background круга и цвет текста. 

Хотелось бы увидеть как это можно сделать на jQuery!

[npofopr]

Делаете ховер на блок и всё. 

А зачем тут jquery?

[alex.kv]

Делаете ховер на блок и всё. 

А зачем тут jquery?

Но ведь если я сделаю ховер на блок, тогда будет изменяться background блока, а не круга( 

Там следующая иерархия 

<div class="block">  <a href="#">    <p>Some text</p>  </a>  <p>    bla bla bla  </p></div>

[Aleksandr.L]

http://jsfiddle.net/jaz07Lw9/