1

Twitterのブートストラップなどに「ドロップダウンメニュー」というクラスがあります。<ul class="dropdown-submenu">. ご覧のとおり、矢印が右にあります。ホバーしたときに矢印の色を暗く設定するにはどうすればよいですか?

4

2 に答える 2

1

次の方法でそれを行うことができます：

ドロップダウン メニューのオンホバーの色の変更の場合:

.navbar .nav li.dropdown > a:hover .caret, .navbar .nav li.dropdown > a:focus .caret {
border-bottom-color: red;/*change color to your liking*/
border-top-color: red;/*change color to your liking*/
}

アクティブ時にキャレットの色を変更する（ドロップダウンメニュー）：

.navbar .nav li.dropdown.open > .dropdown-toggle .caret, .navbar .nav li.dropdown.active > .dropdown-toggle .caret, .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-bottom-color: #008745;/*change color*/
border-top-color: #008745;/*change color*/
 }

ドロップダウンサブメニューの場合

.dropdown-submenu > a:after {
border-color: transparent transparent transparent #000000;/*change here */
border-style: solid;
border-width: 5px 0 5px 5px;
content: " ";
display: block;
float: right;
height: 0;
margin-right: -10px;
margin-top: 5px;
width: 0;
}

ドロップダウン サブメニュー onHover の色の変更:

.dropdown-submenu:hover > a:after{
      border-left-color:#fff; /* change the color to anything of your choice*/

  }

キャレットのデフォルトの色はここで設定され、以下の場所で変更できます。

.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #FFFFFF; /* change the color to anything of ur liking */
content: "";
display: inline-block;
height: 0;
vertical-align: top;
width: 0;
}
于 2013-03-05T12:19:19.700 に答える
0

グリフィコン画像を切り替えるだけですか？

.dropdown-submenu:hover{
  i{
    background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
  }

Googleまたは glyphiconsから色付きのアイコン イメージ ファイルをダウンロードするか、Photoshop で自分自身を変更するだけです

于 2013-03-05T12:19:22.297 に答える