css中hover没效果,我在段落中设置ID时，CSS：hover效果不起作用

我有以下具有轻松效果的css3过渡：

HTML

CSS

* {

padding: 0;

margin: 0;

}

.button {

width: 180px;

margin-top: 45px;

}

.button a {

display: block;

height: 40px;

width: 180px;

/*TYPE*/

color: black;

font: 17px/50px Helvetica, Verdana, sans-serif;

text-decoration: none;

text-align: center;

text-transform: uppercase;

}

.button a {

background:url(http://imageshack.com/a/img819/761/dqj.gif);

margin: -50 0 0 0;

z-index: -1;

}

p#myId {

background: url(http://imageshack.com/a/img854/1921/9ft3.png);

display: block;

height: 40px;

width: 167px;

margin: -40px 0 0 5px;

z-index:-1;

/*TYPE*/

text-align: center;

font: 12px/45px Helvetica, Verdana, sans-serif;

color: #fff;

/*POSITION*/

position: absolute;

/*TRANSITION*/

-webkit-transition: margin 0.1s ease;

-moz-transition: margin 0.1s ease;

-o-transition: margin 0.1s ease;

-ms-transition: margin 0.1s ease;

transition: margin 0.1s ease;

}

.button:hover .top {

margin: -67px 0 0 5px;

line-height: 35px;

}

/*ACTIVE*/

.button:active .top {

margin: -70px 0 0 5px;

}

如果我将p#myId选择器更改为pCSS，它将起作用(按钮

在悬停时会上升)，否则不会起作用。