Hyperlink & hovering problem with my div tag and text.

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Zeus
    New Member
    • Dec 2012
    • 2

    Hyperlink & hovering problem with my div tag and text.

    Good day all, I hope that you could help me with a problem that I'm experiencing in Dreamweaver CS6. I'm at the mark up stage at this point and and am trying to create a hyperlink but all of this this has been to no avail at this point and time. I can't seem to get the hand cursor and rollover links color on my home. What could I be doing wrong here...here's my code:
    Code:
    <div id="home"><a href="#">home</a></div>
    
    #mainContent #home {
    	background-color: rgba(0,0,0,0.5);
    	height: 16px;
    	width: 48px;
    	margin-top: 3px;
    	position: absolute;
    	z-index: -2;
    	left: 84px;
    	top: 309px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9px;
    	font-weight: bold;
    	text-transform: uppercase;
    	color: rgba(255,255,255,1);
    	line-height: 16px;
    	text-align: center;
    	border-radius: 10px;
    }
  • Rabbit
    Recognized Expert MVP
    • Jan 2007
    • 12517

    #2
    If you want a different style for when you "rollover" the link, more commonly known as hover, you have to use the hover pseudoclass to apply a new style.

    Comment

    • Zeus
      New Member
      • Dec 2012
      • 2

      #3
      I'm a novice in HTML5 and CSS3, could you tell how I could achieve this? Most of my other hyper links (all except for one more to this one) work fine so do their hover effects, I set their hover effect in dreamweaver cs6 by pressed ctrl+j, under category I headed to links (css)and set my rollover link color therein to yellow. Like I said that for the most part they work out fine but for some reason they not working here and I don't know why.

      Here's an example of another div where i'm experiencing problems. Here I get the hand cursor but the yellow rollover color doesn't appear?
      Code:
      <h1><a href="#">Terms of Use</a> | <a href="#">Privacy Policy</a> | <a href="#">Advertise With Us</a></h1>
      
      #footer #mainColumns #subscription h1 a {
      	color: rgba(255,255,255,1);
      	font-family: Arial, Helvetica, sans-serif;
      	font-size: 11px;
      	font-weight: bold;
      }

      Comment

      • Rabbit
        Recognized Expert MVP
        • Jan 2007
        • 12517

        #4
        Like I said earlier, you need to use the hover class.
        Code:
        a:hover { color:yellow; }

        Comment

        • martin631775
          Banned
          New Member
          • Dec 2012
          • 13

          #5
          here in 1 problem
          In #home u have given z-index=-2 thats why its not working so remove it after that ancor properties will automatically work...
          fore more help.<link removed>
          Last edited by Rabbit; Dec 31 '12, 08:48 AM. Reason: Link to outside site removed.

          Comment

          Working...