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>
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).
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 ...
The :hover selector is used to show the tooltip text when the user moves the mouse over the <div> with class="tooltip" .
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/
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
You can not select parent elements in CSS. You'll need javascript/jQuery to accomplish what you want.
CSS3 selectors...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With