web-dev-qa-db-ja.com

CSS：段落にIDを設定するとホバー効果が機能しない

次のcss3トランジションにイージーエフェクトがあります。

HTML

<div class="button">     
    <a href="#" onMouseOver="clicksound.playclip()"></a>
    <p id="myId" class="top"></p>            
</div>

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;
 }

CSSでp#myIdセレクターをpに変更すると、機能します（ホバーするとボタンが上がります）。それ以外の場合は機能しません。

Running demo on jsFiddle

htmlcsscss3css-selectorscss-specificity
7
023023

問題は、:hoverの動作を処理するセレクターが低いSpecificityよりもデフォルト動作のルール（p#idセレクター）。

これを変える

.button:hover .top {

これに

.button:hover #myId.top {

問題を解決します： Running example

親オブジェクトにIDを適用し（<div id="container">としましょう）、次を使用することもできます

#container .button:hover .top {

必読： CSS固有の仕様

例：

enter image description here

enter image description here

14
Andrea Ligios