show/hide a list

**crepmaster** · Feb 26, 2013 09:45

hello Gurus...
Hello Gurus,
i'm pretty new to css ( i'm an abaper...) and i'm learning them
I'm trying to show/add a list and an image only by using css. I read many topics but couldn't understand what i'm doing wrong... any clue?
Thanx in advance.
here my piece of code

Code:

ul, .logo:hover>div {
    display: none;
}
 
.logo:hover> {
    display: block;
}

and the html looks like this

HTML Code:

<div class="logo">
<div><img src="images/logo.jpg"  alt="logo" /></div>
<ul><li>item 1 </li>
    <li>item 2</li>
</ul>
</div>

**Paul O'B** · Feb 26, 2013 10:05

Hi Welcome to Sitepoint

I'm not sure what you want to trigger the hover action but here is an example that shows how it should work.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.logo>div,.logo> ul { display: none; }
.logo:hover>div,.logo:hover>ul { display: block; }
</style>
</head>

<body>
<div class="logo">
<p>Hover me</p>
		<div><img src="images/logo.jpg"  alt="logo" /></div>
		<ul>
				<li>item 1 </li>
				<li>item 2</li>
		</ul>
</div>
</body>
</html>

**crepmaster** · Feb 26, 2013 10:51

thanx for the clue but it isn't exacly what i'm trying to do.
My scenario should be that when the mouse is over the pic, the list is shown and not the pic and vis versa.
I don't know if i'm clearer.
I will keep trying following the lead your code gave me.
Thanx.

**PicnicTutorials** · Feb 26, 2013 11:08

Put the ul and the img in a container with position relative. Position absolute the img top/left with z-index 1. Say #container img:hover {display:none}

**Paul O'B** · Feb 26, 2013 11:12

Perhaps something more like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
img {/* for testing only */
	display:block;
	width:100px;
	height:100px;
	background:red
}
.logo> ul { display: none; }
.logo:hover>div { display:none }
.logo:hover>ul { display: block; }
</style>
</head>

<body>
<div class="logo">
		<div><img src="images/logo.jpg"  alt="logo" /></div>
		<ul>
				<li>item 1 </li>
				<li>item 2</li>
				<li>item 3</li>
				<li>item 4</li>
				<li>item 5 </li>
				<li>item 6</li>
				<li>item 7 </li>
				<li>item 8</li>
		</ul>
</div>
</body>
</html>

**crepmaster** · Feb 26, 2013 11:32

Thanx a lot that was what i'm was trying to do.
I'll study your code with attention to understand well how i have to think with css and how to control the div ( i can do it with a dynpro in abap lol but not with an html page...)
Thanx again how can rewards points or mention?

User Tag List

Thread: show/hide a list

Thread Tools

Display

show/hide a list

Bookmarks

Bookmarks

Posting Permissions