Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: a hover

  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a hover

    Hello everyone,

    I've been looking everywhere on the forum trying to figure out how to do hover over a link within a notes class.

    the id= point0,point1......
    and the class is notes

    i cant seem to get it to work, if anyone could help it would be greatly appreciated.

    <style type="text/css"media="screen,tv">
    #point1 a:hover { overflow: visible;
    width: 150px;
    height: 170px;
    z-index: 2 ; }
    #point2 a:hover { overflow: visible;
    width: 150px;
    height: 170px;
    z-index: 2 ; }
    #point3 a:hover { overflow: visible;
    width: 150px;
    height: 170px;
    z-index: 2 ; }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Audi_19,
    One way to get your anchor class to hover -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {background: #FC6;}
    #container {
    	height: 400px;
    	width: 600px;
    	margin: 30px auto;
    	padding: 100px;
    	background: #999;
    }
    .notes:link {color: #000;}
    .notes:hover {color: #ff0;}
    </style>
    </head>
    <body>
        <div id="container">
        	<a href="#" class="notes">linky</a>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it works when i hover over. but its suppose to make a img visible and text visible once you roll over it.

    what should i do??


    thanks in advanced

    <style>

    .notes { font-size:8pt;
    margin:5;
    overflow:hidden;
    width: 20px;
    height: 20px;
    background-color: blue;
    font-color: white;
    z-index: 1; }

    .notes : link { width: 150px;
    height: 170px;
    overflow: visible;
    z-index: 2 ; }
    .notes :hover {
    width: 150px;
    height: 170px;
    overflow: visible;
    z-index: 2 ; }

    .notes span {
    color:yellow ;


    </style>


    <div class="notes" id="point0">
    <a href="longs.htm"> <img src="image0.jpg" alt="" />

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Put this in your hover:
    Code:
    .notes:hover {color: #ff0;
                        background: url(img.jpg);
                       }

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have a diffrent image for each link.

    i tried it for just one image but it wouldnt work.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Audi_19 View Post
    i have a diffrent image for each link.
    Do you mean you have an image for each state of a link? Like one for link, one for visited and one for hover?
    If it's just a different image for each link, then you would need to use an id, not re-using a class.

    It might be easier if you post your entire code instead of little snippets. That way we can get all the information at once.
    It would even be better to linik us to the test site since this question has to do with images we don't have.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    You can put an id to each link.
    Code:
    <a href="#" id=" ">Link</a>
    As Excavator said, we can't really know what you are trying to do until we see the entire script or test site.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #8
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Do you mean you have an image for each state of a link? Like one for link, one for visited and one for hover?

    It might be easier if you post your entire code instead of little snippets. That way we can get all the information at once.
    It would even be better to linik us to the test site since this question has to do with images we don't have.

    their is point 0 ; you roll over point 0 image0 becomes visible and text, you roll over point 1 image1 becomes visible and so on.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Try this... you will probably still need display:block; and a size on your point0,point1...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {background: #FC6;}
    #container {
    	height: 400px;
    	width: 600px;
    	margin: 30px auto;
    	padding: 100px;
    	background: #999;
    }
    .notes a:link {color: #000;}
    .notes a:hover {color: #ff0;}
    	#point0 {background: url(imagePath.jpg);}
    	#point1 {background: url(imagePath.jpg);}
    	#point2 {background: url(imagePath.jpg);}
    	#point3 {background: url(imagePath.jpg);}
    </style>
    </head>
    <body>
        <div id="container">
        	<div class="notes" id="point0"><a href="longs.htm">linky</a></div>
        	<div class="notes" id="point1"><a href="longs.htm">linky</a></div>
        	<div class="notes" id="point2"><a href="longs.htm">linky</a></div>
        	<div class="notes" id="point3"><a href="longs.htm">linky</a></div>
        <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 11-14-2010 at 05:03 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    I thought that is what you were doing. Do what I said above or what Excavator said.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I have a simple rollover tutorial here. Might help.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I'm not sure why the containing div for your links. Is that really needed?

    For your hover you just need to specify each state for each point.

    Code:
    point0 a:link {background: url(pathto.jpg);}
    point0 a:visited {background: url(pathto.jpg);}
    point0 a:hover {background: url(pathto.jpg);}
    point0 a:active {background: url(pathto.jpg);}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i tried it.

    but it still isnt working.

    i tried it in both notes class and id= points

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Show us the entire code for your links. Impossible to tell how what you've tried is not working if we can't see it.

    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    
    <head>
    
       <title>Longs Peak Online Map</title>
    
       <style type="text/css"media="screen,tv">
          body           {font-family: sans-serif; margin: 20px; margin-bottom: 150px}
          h2             {margin-top: 0px}
          img            {border-width: 0px; display: block}
          #online_map    {
                         width: 600px;
                         height: 294px;
                         background-image:url("lpmap.jpg");
                         border:1px solid black;
                         position: relative;
                         top: 0px;
                         left: 0px;    }
    
          #summary       {width: 600px; margin-bottom: 20px}
          a              {text-decoration:none}
    
            
    
             .notes      {  font-size:8pt;
                             margin:5;
                           overflow:hidden;
                           width: 20px;
                          height: 20px;
                          background-color: blue;
                          font-color: white;
                           z-index: 1;  }
            
              .notes : link {  width: 150px;
                             height: 170px;
                             overflow: visible;
                             z-index: 2 ; }
              .notes  :hover  {
                            width: 150px;
                             height: 170px;
                             overflow: visible;
                             z-index: 2 ;
                            ;
                        }
                             
             .notes span {
                          color:yellow ;
    
                          }
    
    
    
    
          #point0         {
                          position:absolute;
                          left:560px;
                          top:60px;
    
    
                                }
    
    
    
           #point1       {
                          position:absolute;
                          left:277px;
                          top:90px;
    
    
                            }
    
    
    
    
          #point2       {
                            position:absolute;
                          left:175px;
                          top:0px;
    
    
    
    
                                    }
          #point3       {
                          position:absolute;
                          left:110px;
                          top:115px;
    
                           }
          #point4       {
                          position:absolute;
                          left:55px;
                          top:165px;
    
                                    }
          #point5      {
                          position:absolute;
                          left:5px;
                          top:180px;
    
                                    }
          #point6       {
                          position:absolute;
                          left:15px;
                          top:222px;
    
                                    }
          #point7      {
                         position:absolute;
                          left:50px;
                          top:245px;
    
                             }
          #point8       {
                          position:absolute;
                          left:100px;
                          top:245px;
    
                                    }
          #point9      {
                           position:absolute;
                          left:90px;
                          top:220px;
    
                                    }
       </style>
    
    </head>
    
    <body>
       <div id="summary">
    
          <h2>Longs Peak <span>Online Trail Map</span></h2>
    
          <p>
             At 14,255 feet, Longs Peak towers above all other summits in Rocky Mountain
             National Park. The summer is the only season in which the peak can be climbed
             by a non-technical route. Early mornings break calm, clouds build in the
             afternoon sky, often exploding in storms of brief, heavy rain, thunder and
             dangerous lightning. Begin your hike early, way before dawn, to be back below
             timberline before the weather turns for the worse.
          </p>
          <p>
             The Keyhole Route, Longs Peak's only non-technical hiking pathway, is a 16
             mile round trip with an elevation gain of 4,850 feet. Though non-technical,
             the Keyhole Route is still challenging and is not recommended for those who
             are afraid of heights or exposed ledges. Hikers should be properly outfitted
             with clothing, food and water. Use caution when ascending or descending steep
             areas. Don't be afraid to back down when bad weather threatens.
          </p>
          <p id="instruction">
             Move your mouse pointer over the numbered landmarks in the map to preview the hike.
          </p>
       </div>
    
    
       <div id="online_map">
    
          <div class="notes" id="point0">
            <a href="longs.htm">   <img src="image0.jpg" alt="" />
                <p>
                   <span>3:30 a.m.</span> Start from the Longs Peak Ranger Station,
                    nine miles south of Estes Park. Be sure to pack food, extra water,
                    sunblock, and warm clothes, gloves, and caps.
                </p> </a>
          </div>
    
          <div class="notes" id="point1">
             <a href="longs.htm">   <img src="image1.jpg" alt="" />
                <p>
                   <span>5:30 a.m.</span> Stop at Mills Moraine for a view of the 
                   sunrise.
               </p>  </a>
          </div>
    
          <div class="notes" id="point2">
            <a href="longs.htm">    <img src="image2.jpg" alt="" />
                <p>
                   <span>7:30 a.m.</span> Time for break at Granite Pass.
                </p>  </a>
          </div>
    
          <div class="notes" id="point3">
             <a href="longs.htm">   <img src="image3.jpg" alt="" />
                <p>
                   <span>8:30 a.m.</span> Climb through the Boulder Field on the 
                   way to the Keyhole.
                </p>  </a>
          </div>
    
          <div class="notes" id="point4">
            <a href="longs.htm">    <img src="image4.jpg" alt="" />
                <p>
                   <span>9:00 a.m.</span> Stop at the
                   Agnes Vaille shelter for a well-deserved breakfast.
                </p> </a>
          </div>
    
          <div class="notes" id="point5">
            <a href="longs.htm">    <img src="image5.jpg" alt="" />
                <p>
                   <span>9:30 a.m.</span> It's time to go through
                   the Keyhole. Be prepared for heavy winds.
                </p> </a>
          </div>
    
          <div class="notes" id="point6">
            <a href="longs.htm">    <img src="image6.jpg" alt="" />
                <p>
                   <span>10:00 a.m.</span> Follow the painted targets along the Ledges.
                </p>  </a>
          </div>
    
          <div class="notes" id="point7">
              <a href="longs.htm">  <img src="image7.jpg" alt="" />
                <p>
                   <span>11:00 a.m.</span> Take special care when crossing the Narrows.
                </p> </a>
          </div>
    
          <div class="notes" id="point8">
             <a href="longs.htm">   <img src="image8.jpg" alt="" />
                <p>
                   <span>11:15 a.m.</span> You're almost there! Climb the Homestretch
                   to reach the summit.
                </p> </a>
          </div>
    
          <div class="notes" id="point9">
             <a href="longs.htm">   <img src="image9.jpg" alt="" />
                <p>
                   <span>11:45 a.m.</span> Congratulations, you've reached the top!
                   Time for lunch and a few photos.
                </p>   </a>
          </div>
    
       </div>
    
    </body>
    </html>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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