SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show/hide a list

    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>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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>

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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}

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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>

  6. #6
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •