0

<ol>色を追加したリストがあります。これは正常に機能しています。しかし、2つのタグを持つdivを追加すると、ホバー効果が適用されません。

私のコードでは、ホバーは2秒間発生していません<li>。

HTML：

<div class="test">
  <ol>
    <a href="#"><li><div><span>test 1</span><p>Mvdshe</p></div></li></a>
    <a href="#"><li><div><span>test 12</span><p>sdgmksgb</p></div>
    <div class="icons"><a href="#" class="play"></a><span class="dividr"></span><a href="#" class="suffle"></a></div></li></a>
    <a href="#"><li><div><span>test 11</span><p>Name dgdg</p></div></li></a>
  </ol>
</div>

CSS：

.test{ position:relative; height:auto; width:100%}
.test ol{margin:0; padding:0; font:normal 30px 'SegoeWPLight', Verdana, Geneva, sans-serif; color:#afafaf; text-align:left; list-style:none; counter-reset: listCounter;}
.test ol li{vertical-align:middle;  padding:10px 20px; border-bottom:#d4d4d4 solid 1px; border-top:#fff solid 1px; counter-increment: listCounter;}
.testol li:before {  content: counter(listCounter) " "; width:30px; margin-right:15px;    display: inline-block;    text-align: right;   }
.test ol li span{vertical-align:middle; display:block; color:#008fcd; font:normal 18px 'SegoeWPLight', Verdana, Geneva, sans-serif;}
.test ol li p{vertical-align:middle; display:block; margin:0; padding:0; font:normal 14px 'SegoeWPLight', Verdana, Geneva, sans-serif; color:#797979;}
.test ol li img{vertical-align:middle; padding-left:10px }
.test ol li div{ display:inline-block; margin-left:25px; vertical-align:middle; }
.test ol a{ text-decoration:none; font:normal 30px 'SegoeWPLight', Verdana, Geneva, sans-serif; color:#afafaf;}
.test ol a:hover li{ background-color:#f4f4f4}
.test ol a.mus_active li{ background-color:#f4f4f4}
.icons{display:inline-block; float:right; vertical-align:middle; width:auto;  margin-top:20px}
.play{background:url(http://www.timeshighereducation.co.uk/magazine/graphics/search_icon_big.gif) no-repeat left; width:25px; height:25px; background-size:15px; display:inline-block !important;  }
.suffle{background:url(../images/suffle.png) no-repeat left;  width:25px; height:25px; display:inline-block !important}
.dividr{background:url(http://www.timeshighereducation.co.uk/magazine/graphics/search_icon_big.gif) no-repeat left; width:3px; height:28px; display:inline-block !important;  margin:0 8px 10px 0}

↪JSFiddleでこのコードを表示する

4

3 に答える 3

1

これを試してください http://jsfiddle.net/bFVGr/2/

.test ol li { vertical-align:middle;  border-bottom:#d4d4d4 solid 1px; border-top:#fff solid 1px; counter-increment: listCounter; }

.test ol li > a{display:block; padding:10px 20px;}

.test ol li > a:hover { background-color:#f4f4f4 }
于 2012-09-28T10:06:42.067 に答える
0

他の人が提案したようにリストの構造を変更したくない場合は、2番目のリストをdiv内に配置して、同じ効果を適用することができます;）

<div id = "special">
<a href="#">
 <li>
    <div>
        <span>test 12</span><p>sdgmksgb</p>
    </div>

    <div class="icons">
        <a href="#" class="play"></a><span class="dividr"></span>
        <a href="#"class="suffle"></a>
    </div>
 </li>
</a>
</div>

と

 .test #special:hover{background-color:#f4f4f4}

ここでフィドルコードを参照してください

編集
私があなたが望むものだと思うdiv全体をクリック可能にするために、あなたはすることができます 

  .test #special a{display:block}

またはこれを参照してください

于 2012-09-28T09:14:06.947 に答える
0

LIをアンカータグ内に配置するのは誤りです。このように書いてください：

<ol>
 <li><a></a></li>
 <li><a></a></li>
</ol>

FF＆chromeでは、コードは次のようにレンダリングされます。

<ol>
<a href="#"><li><div><span>test 1</span><p>Mvdshe</p></div></li></a>
<a href="#"></a><li><a href="#"><div><span>test 12</span><p>sdgmksgb</p></div>
</a><div class="icons"><a href="#"></a><a class="play" href="#"></a><span class="dividr"></span><a class="suffle" href="#"></a></div></li>
<a href="#"><li><div><span>test 11</span><p>Name dgdg</p></div></li></a>

</ol>
于 2012-09-28T08:59:44.670 に答える