KrMa KrMa - 22 days ago 6
Javascript Question

hover on single button in navbar

This javascript is used on the navbar on the following page

When you hover the "blog" in the navbar, there is a dropdown coming, with a white background. The button "Test" should not be a dropdown, but I would like the same function as the blog button. So when you hover the button "test", there should come the same white background. At the moment the text is only becoming blue.

Does anybody have an idea how I can do that?

//Show dropdown on hover only for desktop devices
//-----------------------------------------------
var delay=0, setTimeoutConst;
if ((Modernizr.mq('only all and (min-width: 768px)') && !Modernizr.touch) || $("html.ie8").length>0) {
$('.main-navigation:not(.onclick) .navbar-nav>li.dropdown, .main-navigation:not(.onclick) li.dropdown>ul>li.dropdown').hover(
function(){
var $this = $(this);
setTimeoutConst = setTimeout(function(){
$this.addClass('open').slideDown();
$this.find('.dropdown-toggle').addClass('disabled');
}, delay);

}, function(){
clearTimeout(setTimeoutConst );
$(this).removeClass('open');
$(this).find('.dropdown-toggle').removeClass('disabled');
});
};

Answer

This could be done with CSS using the following declaration:

ul.nav.navbar-nav li:hover{
  background: white;
  }

:hover is a psuedo-class that detects a mouse over the element. You can learn more about the hover pseudo-class and others like it here: Mozilla Developer Network CSS Docs

Comments