CODEWITHSUNDEEP
htmlcss
CodeDevelopr
CodeDevelopr

Reputation: 1265

When hovering a CSS list item, change the parent items 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>

Upvotes: 18

Views: 53153

Answers (6)

Anıl Şahin
Anıl Şahin

Reputation: 66

You look here CSS selectors and I send an example for you have a nice day

.triggerDiv{
  display:none;
}
.child:hover ~.triggerDiv {
  display:block
}
<div class="main">
  <div class="parent">
    <div class="child">
      <p>Hello</p>
    </div>
    <div class="triggerDiv">
      <p>I'm Here</p>
    </div>
  </div>
</div>

Upvotes: -1

leoncc
leoncc

Reputation: 233

The solution of @CherryFlavourPez above works. The reason why it works is not explained clearly though. Note that the li element (the one with the "More" text) is a parent of the submenu (the ul with the five li elements in it). The a element is a (adjacent) sibling of the submenu. So when you are hovering over the submenu you are actually still hovering over the parent li element as well.

Upvotes: 0

CherryFlavourPez
CherryFlavourPez

Reputation: 7487

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

Upvotes: 6

Wex
Wex

Reputation: 15695

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/

Upvotes: 31

Virendra
Virendra

Reputation: 2553

It is not possible to select the parent of an element using CSS. You will have to use JavaScript or JavaScript libraries such as jQuery to implement this.

This might help you. Complex CSS selector for parent of active child

Upvotes: 0

Scott
Scott

Reputation: 21882

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

CSS3 selectors...

Upvotes: 3

Related Questions