Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When hovering a CSS list item, change the parent items CSS

Tags:

html

css

I have a simple UL list, when you hover over the More list item in the HTML below, it unhides it's child menu and shows it.

What I need to do is change the CSS of the actual More's CSS once the child menu is show and hovered.

So if you hover over More a child menu becomes visible, you then hover over that child menu. At this point I need to change the CSS of the Parent of this child menu which would be the menu that has More as it's text.

If you know how to do this without Javascript, I would love to know.. Maybe it is not even possible without JS?

 <div id="nav-wrapper">
        <ul>

            <li><a href="">Link</a></li>

            <li><a href="">Link 5</a></li>

            <li><a href="">More</a>
                <ul>
                    <li><a href="">Sub Link 1</a></li>
                    <li><a href="">Sub Link 2</a></li>
                    <li><a href="">Sub Link 3</a></li>
                    <li><a href="">Sub Link 4</a></li>
                    <li><a href="">Sub Link 5</a></li>
                </ul>
            </li>

        </ul>
    </div>

The CSS

<style type="text/css" media="screen">
#nav-wrapper ul {
    position:relative;
    width: 700px;
    float: right;
    margin: 0;
    list-style-type: none;
}
#nav-wrapper ul li {
    vertical-align: middle;
    display: inline;
    margin: 0;
    color: black;
    list-style-type: none;
}
#nav-wrapper ul li a {
    text-decoration: none;
    white-space: nowrap;
    line-height: 45px;
    font-size: 13px;
    color: #666;
    padding: 5px 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#nav-wrapper ul li a:hover {
    color: #fff;
    background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
    color: #666;
}

/* Hide Sub-menus */
#nav-wrapper ul ul{
    display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul{
    display: block;
    margin:-10px 0 0 0;
    padding:0px 20px 20px 20px;
    border-color:#fff;
    border:1px;
    border-style:solid;
    background:#FFF;
    position:absolute;

    top:45px;
    right: 320px;
    width: 420px;
}

</style>
like image 788
CodeDevelopr Avatar asked Dec 24 '11 04:12

CodeDevelopr


People also ask

How does CSS hover work?

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

How do you make hover on one element and affect another?

if we define 2 HTML elements where we want to hover over one element & at the same moment want to change the style of another element then both the elements should be directly related as either parent-child or sibling, which indicates either one element must be inside another element or both elements should be within ...

What is the CSS property that offers extra information about something when you hover over an element?

The :hover selector is used to show the tooltip text when the user moves the mouse over the <div> with class="tooltip" .


3 Answers

Well, despite what these other answers say, here's kind of a sneaky way of going about it using the adjacent selector.

HTML:

<ul>
    <li>
        <ul>
            <li>Sub Link 1</li>
            <li>Sub Link 2</li>
            <li>Sub Link 3</li>
        </ul>
        <a href="#">Menu</a>
    </li>
</ul>

CSS:

* { 
    margin: 0; 
    padding: 0; }
ul { list-style: none; }
ul > li { position: relative; }
ul li a { 
    height: 16px;
    display: block; }
ul ul { 
    position: absolute;
    top: 16px;
    left: 0;
    cursor: pointer;
    display: none; }
ul li:hover ul { display: block; }
ul ul:hover + a { color: red; }

Preview: http://jsfiddle.net/Wexcode/YZtgL/

like image 51
Wex Avatar answered Oct 13 '22 11:10

Wex


Old question, and the accepted answer is clever. But this is pretty trivial to achieve, with just a single change in your CSS from:

#nav-wrapper ul li a:hover

to:

#nav-wrapper ul li:hover>a

This won't work in IE6 (that browser only understands hover styles on anchors). But then nor does the adjacent sibling combinator selector (+).

See this jsFiddle for the fix in action

like image 28
CherryFlavourPez Avatar answered Oct 13 '22 10:10

CherryFlavourPez


You can not select parent elements in CSS. You'll need javascript/jQuery to accomplish what you want.

CSS3 selectors...

like image 39
Scott Avatar answered Oct 13 '22 11:10

Scott