Bootstrap “jumbotron-narrow” example. how does the style change?


Tags: html,css,twitter-bootstrap

Problem :

I'm going over the bootstrap site example http://getbootstrap.com/examples/jumbotron-narrow/# and when I hover my mouse over the "About" or "Contact" links a grey rounded box appears around the text. When the mouse leaves the element, the grey rounded box disappears.

This is driving me crazy! I have inspected these elements and gone through the styles applied to them and have gone through every single one of them, all the inherited ones, the whole lot. Can someone go through the css and tell me exactly how this is happening? I expected to find some sort of :hover or :focus css but none exists. Furthermore it is not javascript that is changing the background as I have tested the site with javascript enabled.

Please help and I will love you forever.



Solution :

The code you are looking for:

.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #EEE;
}

enter image description here

Super simple, fix:

<link bootstrap />
<link custom />  <-- Overwrite CSS by placing external file after in HTML

Or:

<link bootstrap />
<style></style> <-- Overwrites bootstrap's external CSS

CSS to change is simple:

.nav > li > a:hover, .nav > li > a:focus {
    background-color: none;
}

Why does Bootstrap make it so if you hover, it turns grey?

It is because it tells the visitors, that they are on something clickable: a link. And making it more user-friendly and improves a website's UX.


    CSS Howto..

    less: how to import multiple css?

    HTML with CSS: How to style font in a table?

    How to tell the code to choose between two variables and make them equal?

    How can I make two divs stack whilst still having my text wrap without media queries

    How to rotate element to left and right based on mouse movement using jQuery & CSS

    CSS: how to enforce word wrap on an odd situation?

    How to override group of css class?

    How to do taxonomy based css styling using drupal template.php?

    How to stack two UL classes directly on top of one another in the middle of the page

    How to create two column in form using css

    How to show/hide content based on a css class

    How To Implement 2D Perspective Within a 3D Space (CSS & jQuery)

    How to prevent div become two rows?

    How do I position a Silverlight Control

    How to get this image border effect with CSS [closed]

    How can I make a different CSS for the first child
    ?

    How to restrict CSS animation to a certain div?

    How to make this button is CSS with Angled , Drop shadow, Inset shadow with flexibility in width

    How to set two elements on the same line using CSS

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    How to use a jQuery variable in CSS property

    How to animate to position fixed?

    Boostrap: How to “stick” a button over an image when re-sizing

    How to make a drop-right menu?

    How to avoid gaps using Isotope with Masonry layout sortby random

    How is it possible to modify the gap between a bullet and its list text?

    How to use jQuery's flag to swap CSS display property

    How to give border to any element using css without adding border-width to the whole width of element?

    How can I prevent a bookmark from changing style when moving the cursor over it?

    How to make CSS menu stay on top