twitter Bootstrap 中有一个类“下拉菜单”,例如。 <ul class="dropdown-submenu">
.
如您所见,它右边有一个箭头。如何在鼠标悬停时将箭头的颜色设置为深色?
最佳答案
您可以通过以下方式进行:
对于下拉菜单悬停颜色更改:
.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;
}
悬停时下拉子菜单颜色变化:
.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;
}
关于javascript - 在 Twitter Bootstrap 中创建 custom.css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15223388/