Skip to main content
LGMTL
LGMTL
Inspiring
July 1, 2017
Answered

Hover problem on Bootstrap button

  • July 1, 2017
  • 2 replies
  • 7364 views

I have a boostrap button that when I mouseover the button slowly it first changes the background color of the button (text color remains same) then when I hover over the text it changes text color.  I was wondering if it's possible to have both the text and background change at the same time and not individually like the PDF icon on the button?

These are the buttons on the middle of the page: http://prntscr.com/fqhbmb

Link:  Supreme - GALAXY CLEAN FACE

CSS: [PHP] @charset "utf-8";  @import url("../webfonts/SourceSansPro_Regular/stylesheet.css - Pastebin.com

Markup: [PHP] <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con - Pastebin.com

I would just like the text to change to White on hover over any part of the button and not just over the text. 

Thanks for your help!

Brandon

    This topic has been closed for replies.
    Correct answer osgood_

    Yes you can do that. Its yet another  'making you jump through hoops' Bootstrap feature:

    .btn-default:hover > a {

    color: #fff!important;

    }

    in normal circumstances (writing you own code) this simple logical css would work but not in Bootstrap:

    .btn-default a:hover  {

    color: #fff;

    }

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 1, 2017

    Bootstrap buttons  typically change background by default.  But depending on the Theme you're using, the change might be too subtle for you.

    As an example:

    <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#myModal">CLICK HERE</button>

    Or

    <a href class="btn btn-sm btn-primary" src="my_awesome.pdf">PDF LINK</a>

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_Correct answer
    Legend
    July 1, 2017

    Yes you can do that. Its yet another  'making you jump through hoops' Bootstrap feature:

    .btn-default:hover > a {

    color: #fff!important;

    }

    in normal circumstances (writing you own code) this simple logical css would work but not in Bootstrap:

    .btn-default a:hover  {

    color: #fff;

    }

    LGMTL
    LGMTLAuthor
    Inspiring
    July 2, 2017

    Perfect! thanks Osgood.

    Brandon

    O
    osgood_
    Legend
    July 2, 2017

    brandonw6890098  wrote

    Perfect! thanks Osgood.

    Brandon

    Glad it works.

    Its looking to be a hugley nice website visually but coding wise not so much. I can tell you are a designer BUT not a coder.

    Youre repeating a lot of stuff, are you using includes which could be the result of why so much is being repeated?

    For instance all the below at line 51:

    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet" type="text/css">

    <link href="css/mystyles.css" rel="stylesheet" type="text/css">

    You have these links inserted about 3 times:

       <!-- SmartMenus jQuery plugin -->

       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/jquery.smartmenus.js"></script>


           <!-- SmartMenus jQuery Bootstrap Addon -->

       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>

    You have the below links at line 454 which I think are repeated at the top of the page:

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <div class="container-fluid container-footer"><meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <link href="css/mystyles.css" rel="stylesheet" type="text/css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices