SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Selecting the Parent for Child:hover

    Hey there.

    Kinda stuck, looking for a bit of help. I'm trying to create a menu where hovering on an element produces a vertical border to the right. However, I can't figure out what the correct syntax would be to select the parent when the child is hovered.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I'm afraid there is no syntax to select a parent. You'd have to use scripting to achieve the effect you want, which is probably a good thing anyway so you can support IE. Something like this would work:
    HTML Code:
    <div id="myParent">
    <a href="/whatever/" 
    onmouseover="this.parentNode.style.borderRight='5px solid red';" 
    onmouseout="this.parentNode.style.borderRight='';" 
    onfocus="this.parentNode.style.borderRight='5px solid red';" 
    onblur="this.parentNode.style.borderRight='';">My link</a>
    </div>

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn I was hoping for CSS, and screw IE, its only a little Decorative thing. Guess the scripting will do. Thanks vinnie.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I'm trying to create a menu where hovering on an element produces a vertical border to the right.
    Why don't you just add a right border to the anchor on hover or am I missing the point here

    Paul

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DeeBs
    Damn I was hoping for CSS, and screw IE, its only a little Decorative thing. Guess the scripting will do. Thanks vinnie.
    CSS = Cascading Style Sheets. Cascades go down, not up.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Why don't you just add a right border to the anchor on hover or am I missing the point here

    Paul
    I want the border to be all the way down the list, not just the currently highlighted list item.

    Anyhow, the scripting is working fine, I was just initially hoping to be able to avoid it if at all possible.

  7. #7
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS = Cascading Style Sheets. Cascades go down, not up.
    Quite possibly my biggest gripe about CSS. I couldn't even begin to name all of the possibilities such functionality would enable.


    As for the question at hand, there is a CSS based solution. It doesn't work in Internet Explorer (of course), but it does show up properly in Opera and Mozilla, and probably other browsers as well. Here is a sample document that I whipped up to illustrate the effect that you're wanting to achieve...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title> XHTML 1.0 Shell - Strict Specification </title>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    		<style type='text/css'>
    			ul {
    				margin: 0;
    				padding: 0;
    				background-color: #eee;
    				border-right: 1px Solid #eee;
    				width: 100px;
    				list-style: none;
    				font: 13px/130% Verdana,Arial,Helvetica,Sans-Serif;
    			}
    
    			ul:hover {
    				border-right: 1px Solid #aaa;
    			}
    
    			ul li a {
    				display: block;
    				background-color: #eee;
    				text-indent: 5px;
    				height: 20px;
    				line-height: 20px;
    				color: #000;
    				text-decoration: none;
    			}
    
    			ul li a:hover {
    				background-color: #ddd;
    			}
    		</style>
    	</head>
    	<body>
    		<ul>
    			<li><a href='#'>Whatever</a></li>
    			<li><a href='#'>Whatever</a></li>
    			<li><a href='#'>Whatever</a></li>
    			<li><a href='#'>Whatever</a></li>
    			<li><a href='#'>Whatever</a></li>
    			<li><a href='#'>Whatever</a></li>
    			<li><a href='#'>Whatever</a></li>
    			<li><a href='#'>Whatever</a></li>
    			<li><a href='#'>Whatever</a></li>
    			<li><a href='#'>Whatever</a></li>
    		</ul>
    	</body>
    </html>

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just from looking at that though, it looks like the side border would remain constant no matter which LI is being hovered mover. What I'm looking for is to switch colors for each list item. So scripting it is. I agree on the gripes with CSS though. More flexibility isn't going to hurt.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well just for fun you can do it like this without scripting :

    http://www.pmob.co.uk/temp/list-withborder-onhover.htm

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title> XHTML 1.0 Shell - Strict Specification </title>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <style type='text/css'>
       ul {
    	margin: 0;
    	padding: 0;
    	background-color: #eee;
    	width: 100px;
    	list-style: none;
    	font: 13px/130% Verdana,Arial,Helvetica,Sans-Serif;
    	position:relative;
       }
       li {padding-right:5px}
       ul li a {
    	display: block;
    	background-color: #eee;
    	text-indent: 5px;
    	height: 20px;
    	line-height: 20px;
    	color: #000;
    	text-decoration: none;
       }
       ul li a:hover {
    	background-color: #ddd;
       }
      
      span {
       visibility:hidden;
       position:absolute;
       width:5px;
       height:20px;
       right:0; 
       }
       span.a {background:red;top:0}
       span.b {background:green;top:20px}
       span.c {background:blue;top:40px}
       span.d {background:yellow;top:60px}
       ul li a:hover span {visibility:visible}
      
      </style>
    </head>
    <body>
    <ul>
      <li><a href='#'>Whatever<span class="a"></span><span class="b"></span><span class="c"></span><span class="d"></span></a></li>
      <li><a href='#'>Whatever<span class="a"></span><span class="b"></span><span class="c"></span><span class="d"></span></a></li>
      <li><a href='#'>Whatever<span class="a"></span><span class="b"></span><span class="c"></span><span class="d"></span></a></li>
      <li><a href='#'>Whatever<span class="a"></span><span class="b"></span><span class="c"></span><span class="d"></span></a></li>
    </ul>
    </body>
    </html>
    But I agree scripting may be more suitable in this case (unless you want to support non js enabled viewers also of course )

    Paul

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was actually looking for something like this: Side Border

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title> XHTML 1.0 Shell - Strict Specification </title>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <style type='text/css'>
       ul {
    	margin: 0;
    	padding: 0;
    	background-color: #eee;
    	width: 100px;
    	list-style: none;
    	font: 13px/130% Verdana,Arial,Helvetica,Sans-Serif;
    	position:relative;
       }
       ul li a {
    	display: block;
    	background-color: #eee;
    	text-indent: 5px;
    	height: 20px;
    	line-height: 20px;
    	color: #000;
    	text-decoration: none;
       }
       ul li a:hover {
    	background-color: #ddd;
       }
    
      </style>
    </head>
    <body>
    <ul>
      <li
      onmouseover="this.parentNode.style.borderRight='5px solid #A30000';"
      onmouseout="this.parentNode.style.borderRight='';"
      onfocus="this.parentNode.style.borderRight='5px solid #A30000';"
      onblur="this.parentNode.style.borderRight='';">
      <a href="#">Whatever</a></li>
      <li
      onmouseover="this.parentNode.style.borderRight='5px solid #1FA300';"
      onmouseout="this.parentNode.style.borderRight='';"
      onfocus="this.parentNode.style.borderRight='5px solid #1FA300';"
      onblur="this.parentNode.style.borderRight='';">
      <a href="#">Whatever</a></li>
      <li
      onmouseover="this.parentNode.style.borderRight='5px solid #000C81';"
      onmouseout="this.parentNode.style.borderRight='';"
      onfocus="this.parentNode.style.borderRight='5px solid #000C81';"
      onblur="this.parentNode.style.borderRight='';">
      <a href="#">Whatever</a></li>
      <li
      onmouseover="this.parentNode.style.borderRight='5px solid #AAC226';"
      onmouseout="this.parentNode.style.borderRight='';"
      onfocus="this.parentNode.style.borderRight='5px solid #AAC226';"
      onblur="this.parentNode.style.borderRight='';">
      <a href="#">Whatever</a></li>
    </ul>
    </body>
    </html>

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ahhhh - even easier

    Now this is more viable than the last method.

    http://www.pmob.co.uk/temp/list-withborder-onhover2.htm

    Paul

  12. #12
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't realize that the entire right border should change color depending on which item was being hovered. Paul's solution will work just fine


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
  •