CODEWITHSUNDEEP
htmlcsszurb-foundation
Skeptar
Skeptar

Reputation: 149

Foundation li:hover background-color

I started today with the framework Foundation. I picked a defined navigationbar from the page. Now i want to add, if someone hover over a li the background-color of the element should change (maybe with transition). But i dont know how to speak to the element. My Code is here (my own css):

body{
    background-color: rgb(25, 81, 118);
}

li:hover{
    background-color: rgb(25, 81, 118);
}
<!DOCTYPE html>
<html class="no-js" lang="en" >
    <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Foundation 5</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/foundation.css">
        <link rel="stylesheet" href="css/app.css">
        <script src="js/vendor/modernizr.js"></script>
    </head>
    <body>
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">Startpage4you</a></h1>
                </li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                <li class="toggle-topbar menu-icon">
                    <a href="#"><span></span></a>
                </li>
            </ul>
            <section class="top-bar-section"> <!-- Right Nav Section -->
                <ul class="right">
                    <li class="has-dropdown"> 
                        <a href="#">Anmelden</a>
                        <ul class="dropdown">
                            <li><a href="#">First link in dropdown</a></li>
                            <li><a href="#">Active link in dropdown</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
        </nav>
        
        <!-- End of the body -->
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>
        <script> 
            $(document).foundation(); 
        </script>
        <!-- -->
    </body>
</html>

Upvotes: 0

Views: 876

Answers (2)

lharby
lharby

Reputation: 3265

Purely for the purposes of this exercise, here is your code snippet with the value changed for the hover function, so you can see it working.

I've also added a different hover colour for the sub li.

I have also added in the transition effect. Although this requires vendor prefixes. 

body{
    background-color: rgb(25, 81, 118);
}

li {
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
}

li:hover{
    background-color: rgb(200, 200, 118);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

   li li:hover {
  background-color: rgb(255, 130, 9);
   }
<!DOCTYPE html>
<html class="no-js" lang="en" >
    <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Foundation 5</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/foundation.css">
        <link rel="stylesheet" href="css/app.css">
        <script src="js/vendor/modernizr.js"></script>
    </head>
    <body>
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">Startpage4you</a></h1>
                </li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                <li class="toggle-topbar menu-icon">
                    <a href="#"><span></span></a>
                </li>
            </ul>
            <section class="top-bar-section"> <!-- Right Nav Section -->
                <ul class="right">
                    <li class="has-dropdown"> 
                        <a href="#">Anmelden</a>
                        <ul class="dropdown">
                            <li><a href="#">First link in dropdown</a></li>
                            <li><a href="#">Active link in dropdown</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
        </nav>
        
        <!-- End of the body -->
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>
        <script> 
            $(document).foundation(); 
        </script>
        <!-- -->
    </body>
</html>

EDIT

As per your comment, you wanted to know why your li's were changing in mobile view but not desktop. It is because of this code:

@media only screen and (min-width: 40.063em)
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
   color: #FFFFFF;
   background-color: #555555;
   background: #333333;
}

This is quite strage, so I am wondering if this is your markup? background is a shorthand for adding several background properties, including background-color, which in this case is ignored.

If you remove one of these and change the other value to a colour you can see on the page just for testing. It could look like this (I've added in the transition also):

@media only screen and (min-width: 40.063em)
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
   color: #FFFFFF;
   background: #660099;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}

Upvotes: 3

Derek Story
Derek Story

Reputation: 9583

background-color of body is set to the same as the hover state for li. Unless li has a different background color beforehand, the hover isn't going to show a change because the background will blend with the body.

Instead, you can just give the hover state of li a different background color:

JS Fiddle

body{
    background-color: rgb(25, 81, 118);
}

li:hover{
    background-color: green;
}

Upvotes: 1

Related Questions