Web Analytics Made Easy -
StatCounter Showing/hiding element in nested list on hover - CodingForum

Announcement

Collapse
No announcement yet.

Showing/hiding element in nested list on hover

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Showing/hiding element in nested list on hover

    Hi Guys,

    I have an pretty intense expandable/collapsable nested list here (all expanded in the code I'll paste here without javascript), in each list item there will be some buttons that I don't want to display until the relevant list item is hovered over. As you can see in the example code I've pasted, the problem I'm having is because its a nested list, the father list item is always active as the one your hovering over is in it - so the buttons display on both or on any father elements too.

    The nested list is dynamic via a cms so it could have a few levels links.

    Does anyone have some clever ideas on how to fix this with CSS, or will it have to be a javascript solution?

    Thanks in advance
    Re. Ste

    Code:
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <title>Test Page</title>	
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <style type="text/css">
    
    body {
    	background:#333;
    	font-size:12px;
    	margin:0;
    	padding:0;
    	}
    section,
    article,
    header,
    footer,
    nav,
    aside,
    hgroup { 
    	display: block;
    	}
    aside {
    	background:#000;
    	float:left;
    	margin:0;
    	padding: 16px 0;
    	position:relative;
    	width:240px;
    	}
    nav ul {
    	list-style:none;
    	margin:0 0 0 16px;
    	padding:0;
    	}
    nav ul ul {
    	margin:16px 0 0 12px;
    	}
    nav ul li {
    	margin-bottom:16px;
    	text-indent:8px;
    	position:relative;
    	}
    nav .buttons {
    	display:none;
    	float:right;
    	height:16px;
    	margin-right:8px;
    	position:relative;
    	width:32px;
    	}
    nav li a {
    	color:#f00;
    	text-decoration:none;
    	} 
    nav li a:hover {
    	color:#960000;
    	text-decoration:none;
    	}
    nav li:hover > .actions {
    	display:block;
    	cursor:pointer;
    	}
    .buttons button {
    	float:right;
    	}
    
    </style>
    
    </head>
    
    <body>
    <aside>
    	<nav>
    		<ul>
    			<li>
    				<a href="#" title="TITLE TEXT.">Part I</a>
    				<div class="buttons">
    					<button class="delete">Remove</button>
    				</div>
    				<ul>
    					<li>
    						<a href="#" title="TITLE TEXT.">About</a>
    						<div class="buttons">
    							<button class="delete">Remove</button>
    						</div>
    						<ul>
    							<li>
    								<a href="#" title="TITLE TEXT.">List item 1</a>
    								<div class="buttons">
    									<button class="delete">Remove</button>
    								</div>
    							</li>
    							<li>
    								<a href="#" title="TITLE TEXT.">List item 2</a>
    								<div class="buttons">
    									<button class="delete">Remove</button>
    								</div>
    							</li>
    							<li>
    								<a href="#" title="TITLE TEXT.">List item 3</a>
    								<div class="buttons">
    									<button class="delete">Remove</button>
    								</div>
    							</li>
    						</ul>
    					</li>
    					<li>
    						<a href="#" title="TITLE TEXT.">Portfolio</a>
    						<div class="buttons">
    							<button class="delete">Remove</button>
    						</div>
    					</li>
    					<li>
    						<a href="#" title="TITLE TEXT.">Solutions</a>
    						<div class="buttons">
    							<button class="delete">Remove</button>
    						</div>
    					</li>
    					<li>
    						<a href="#" title="TITLE TEXT.">Legal</a>
    						<div class="buttons">
    							<button class="delete">Remove</button>
    						</div>
    						<ul>
    							<li>
    								<span></span>
    								<a href="#" title="TITLE TEXT.">List item 4</a>
    								<div class="buttons">
    									<button class="delete">Remove</button>
    								</div>
    							</li>
    							<li>
    								<span></span>
    								<a href="#" title="TITLE TEXT.">List item 5</a>
    								<div class="buttons">
    									<button class="delete">Remove</button>
    								</div>
    							</li>
    							<li>
    								<span></span>
    								<a href="#" title="TITLE TEXT.">List item 6</a>
    								<div class="buttons">
    									<button class="delete">Remove</button>
    								</div>
    							<ul>
    								<li>
    									<span></span>
    									<a href="#" title="TITLE TEXT.">List item 7</a>
    									<div class="buttons">
    										<button class="delete">Remove</button>
    									</div>
    								</li>
    								<li>
    									<span></span>
    									<a href="#" title="TITLE TEXT.">List item 8</a>
    									<div class="buttons">
    										<button class="delete">Remove</button>
    									</div>
    								</li>
    								<li>
    									<span></span>
    									<a href="#" title="TITLE TEXT.">List item 9</a>
    									<div class="buttons">
    										<button class="delete">Remove</button>
    									</div>
    									<ul>
    										<li>
    											<span></span>
    											<a href="#" title="TITLE TEXT.">List item 10</a>
    											<div class="buttons">
    												<button class="delete">Remove</button>
    											</div>
    										</li>
    										<li>
    											<span></span>
    											<a href="#" title="TITLE TEXT.">List item 11</a>
    											<div class="buttons">
    												<button class="delete">Remove</button>
    											</div>
    										</li>
    										<li>
    											<span></span>
    											<a href="#" title="TITLE TEXT.">List item 12</a>
    											<div class="buttons">
    												<button class="delete">Remove</button>
    											</div>
    										</li>
    									</ul>
    								</li>
    							</ul>
    						</li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    		</ul>
    	</nav>
    </aside>
    </body>
    </html>

  • #2
    Cheeky bump?

    Also just realised this:

    Code:
    nav li:hover > .actions {
    	display:block;
    	cursor:pointer;
    	}
    Should be:

    Code:
    nav li:hover > .buttons {
    	display:block;
    	cursor:pointer;
    	}
    Thanks again!

    Comment

    Working...
    X