Targeting an element by hovering another element in CSS

Question

How can I target one element on hover and then effect an other element?

Here's the HTML:

        <header>
            <h1 style="float: left; margin-top: 2%;">&nbsp;&nbsp;&nbsp;Naughty Mama.</h1>
            <nav>
                <ul>
                    <li><a href="profile.php">My Profile</a></li>
                    <li><a href="inbox.php">Inbox</a></li>
                    <li><a href="notifications.php">Notifications</a></li>
                </ul>
            </nav>
        </header>

Here's the CSS:

@CHARSET "ISO-8859-1";

header {
    background-color: #ddd;
}

nav {
    float: right;
    margin-right: 5%;
    margin-top: 2%;
}

nav ul li{
    display: inline;
    padding: 15px;
    background-color: #eee;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

nav ul li a:hover {
    color: #000;
}

I want to effect the nav ul li when I hover on nav ul li a.

Hope I am clear.

possible duplicate of On a CSS hover event, can I change another div's styling? — Mark Amery
– Mark Amery, Commented Jun 30, 2013 at 19:39
I know how to do that with JS but I wanted a CSS solution! :) Thanks. Anyone post the answer so I can accept it :) The first one will be accepted! — Mohammad Areeb Siddiqui
– Mohammad Areeb Siddiqui, Commented Jun 30, 2013 at 19:41

G-Cyrillus · Accepted Answer · 2013-06-30 19:45:23Z

2

You may style <a> so it covers <li>. apply hover effect as background to <a> :) http://codepen.io/anon/pen/zyDLA

header {
  background-color: #ddd;
}

nav {
  float: right;
  margin-right: 5%;
  margin-top: 2%;
}

nav ul li{
  display: inline-block;
  background-color: #eee;
  vertical-align:top;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  display:block;
  padding:15px;
}

nav ul li a:hover {
  color: #000;
  background:#48a
}

answered Jun 30, 2013 at 19:45

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Targeting an element by hovering another element in CSS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related