12

私は次のものを持っています：

    <div id="side-menu" class="sidebar-nav span2">
        <div class="sidebar-link"><span>Link 1</span></div>
        <div class="sidebar-link"><span>Link 2</span></div>
    </div>

2つのdivのそれぞれにカーソルを合わせると、テキストの右側または左側にあるオフのテキストにカーソルを合わせると、それぞれの色が変わるようにしようとしています。現在、テキストの上にカーソルを置いた場合にのみ色が変わります。これを行う方法はありますか？これがcssの私のフィドルです：

http://jsfiddle.net/PTSkR/56/

4

2 に答える 2

26

ホバーセレクターにスペースがあります。スペースは CSS の子孫セレクターであるため、これは重要です。

div.sidebar-link :hover{
    background-color: #E3E3E3;
}

これは、ホバリングされた の子孫のみが.sidebar-linkルールの影響を受けることを意味します。スペースを削除します。

http://jsfiddle.net/ExplosionPIlls/PTSkR/57/

于 2013-05-19T01:26:56.127 に答える
1

これは、次のコードで簡単に実現できます:リンク

.cstDiv{
    padding:10px;  /* text-align:center may be used for a good look */
    width:55px;
}

div.cstDiv:hover{
    background-color:gray;    
    color:white;
    cursor:pointer;  /* you may delete this if you want */
}
   <div>
       <div class="cstDiv">Link I</div>
       <div class="cstDiv">Link II</div>
       <div class="cstDiv">Link III</div>
       <div class="cstDiv">Link IV</div>
   </div>

于 2016-09-10T12:07:39.010 に答える