Changing hover style on navbar collapse?

Working with Bootstrap 3, I'm trying to figure out how to trigger a class/style change on .navbar-default .navbar-nav > li > a:hover when the navbar collapses.

When the navbar is fully expanded, I would like the border color to change on mouse hover. When the navbar is collapsed, I would like the background color to change (in the dropdown) on mouse hover.

I'm thinking whatever is triggering the navbar collapse can toggle the class, but I can't find where this is happening.

Is this possible to make bootstrap trigger the style change, or will I need to write a custom function? Any other suggestions on how to accomplish this?

Cheers.

---

You can do this with media-queries in your CSS. jsFiddle Demo

// Navbar expanded
@media (min-width: 768px){
    .navbar-default .navbar-nav > li > a:hover{
        border: 1px solid red;
    }
}

//Navbar collapsed
@media (max-width: 768px){
    .navbar-default .navbar-nav > li > a:hover{
        background-color: red;
    }
}

But there are a few problems with this...

navbav-nav links dont have a border, so adding one might cause the size of the the navbar to change.

When the navbar is collapsed, it is meant for mobile devices, so "Hover" isn't really applicable on (touch) mobile devices. I mean, how often do you use a browser window that is less than 768px wide on a desktop?

---

Make sense what you are saying regarding hover in mobile. However, sometimes you make your browser window smaller and in this case collapsed navbar shows up with content not suitable for a small menu. I'm still trying to figure out how to achieve that without using media-queries. In my case I'm trying to remove FontAwesome icon that I use on hover. I'll be glad to hear suggestions.

链接地址: http://www.djcxy.com/p/83670.html

上一篇: Bootstrap 3下拉菜单中心对齐不起作用

下一篇: 更改导航栏合拢的悬停样式？