CSS changing Bootstrap well or jumbotron on hover

If you have ever wanted to add CSS hover effects to a Bootstrap well or jumbotron you will have found out that .well:hover{} doesn’t work. To add effects on hover you need to use JS.

Use this example and tweak it to your liking, adding the script just inside the </body> tag.

<script>
    $(".well,.jumbotron").mouseenter(function () {
        $(this).css({'background-color': '#ff0052'})
    });
    $(".well,.jumbotron").mouseleave(function () {
        $(this).css({'background-color': '#ef0050'})
    })
</script>

Now when the mouse enters a well or jumbotron the color goes #ff0052 and will return to #ef0050 when the mouse leaves and/or is not hovering on the element.

You can also add other features  like

<script>
    $(".well,.jumbotron").mouseenter(function () {
        $(this).css({'background-color': '#ff0052', 'box-shadow': '9px 9px 7px #08080833'})
    });
    $(".well,.jumbotron").mouseleave(function () {
        $(this).css({'background-color': '#ef0050'})
    })
</script>

This will add a box shadow on hover.