SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying/hiding an element whereby CSS

    Hi everyone,
    My HTML page contains an horizintal, 4 items menu and a red square.
    The default display of that red sqaure is "unseen". You can see that red square
    only with mouse hovers the first menu item " aaaa". This is the HTML code:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Example</title>
        <meta charset='utf-8'>
        <link rel="stylesheet" type="text/css" href="css/red_style.css" />
      </head>
      <body>
        <ul>
          <li><a id="xxx" href="#">aaaa</a></li>
          <li><a href="#">bbbb</a></li>
          <li><a href="#">cccc</a></li>
          <li><a href="#">dddd</a></li>
      </ul>
      <div id="xxx">
      </body>
    </html>
    And this is the style page (red_style.css)
    Code:
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote,a, abbr, acronym, address, big, cite, del, 
    dfn, em, img, ins, kbd, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, 
    details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, 
    mark, audio, video 
    	{
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    	}
    ul {
        position:absolute;
        list-style-type:none;
        border: 1px solid red 
       }
    ul li {
          float:right; 
          border-right:1px solid #9fa9aa;
          }
    a:hover {color:#2c3e50;font-size:105%;}
    li a#xxx:hover #yyy{display:block}
    div#yyy {
              position: absolute;
              width:43.5%;
              height:54.5%;
              margin: 12% 0% 0% 37%;
              background-color:red; 
              background-repeat: no-repeat;
              display:none;
              }
    My question is: Why doesnt the red square (div#yyy) show up when menu item "aaaa" is hovered?
    Thanks a lot !

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    The HTML cannot work. Replace the body contents of the HTML with the following and see if this helps.
    Code:
    <body>
    
    <ul>
        <li><a id="xxx" href="#">aaaa<div id="yyy"></div></a></li>
        <li><a href="#">bbbb</a></li>
        <li><a href="#">cccc</a></li>
        <li><a href="#">dddd</a></li>
    </ul>
    
    </body>
    Why are you declaring the <ul> and and <div> to be {position:absolute}? The CSS does not make much sense even as a learning experiment. It might be helpful if you could include a drawing of what you expect the page to look like.

  3. #3
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ronpat,
    Your advise is helpful enough to save me sending a drawing.
    I left the positioning after having isolated the problem from the whole page worrying that without it other problems might emerge.
    Thanks a lot ! The code works fine !

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    In the interest of providing an explanation to go along with the suggestion... the reasons that your example would not work are 2:
    (1) The <div> had the wrong id. (Aside: I'm sure you know that an ID can only be used ONCE on a page. Classes are far better most of the time.)
    (2) But most importantly, the <div> was outside of the <a>. One can target a child inside of a container by hovering over the container, but cannot target an object outside of the hovered container. The <div> was moved inside of the <a> anchor so it would be a targetable child of the anchor.

  5. #5
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you,
    1. Negligently I didn't change the div's id name to 'yyy' in the post as I did in my code while I was writing that post;
    2. "One can target a child inside of a container by hovering over the container" is the essence of my problem and I'll try to keep this in mind.
    Thanks again


Tags for this Thread

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
  •