SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Change Font Color on Hover

    Hello everyone,

    I'm trying to change the font color upon hovering of my CSS ID's #realmaturesingles and #seniorpeoplemeet. How do I do this using JavaScript? This is what I've tried.

    Code:
    <script type="text/javascript">
    $('#seniorpeoplemeet').FontEffect({
    		gradient:true,
    		mirror:true,
    		mirrorColor:"#CCC"
     })
    
    $('#realmaturesingles').FontEffect({
    		gradient:true,
    		mirror:true,
    		mirrorColor:"#CCC"
     })
    
    function seniorPeopleMeetInitial()
    {
    	$('#seniorpeoplemeet').FontEffect({
    		gradient:true,
    		mirror:true,
    		mirrorColor:"#CCC"
     		})
    }
    
    function realMatureSinglesInitial()
    {
    	$('#realmaturesingles').FontEffect({
    		gradient:true,
    		mirror:true,
    		mirrorColor:"#CCC"
     	})
    }
    
    function seniorPeopleMeetChange()
    {
    	$(this).find("#seniorpeoplemeet").css('color', '#666');
    }
    
    function realMatureSinglesChange()
    {
    	$(this).find("#realmaturesingles").css("color", '#666');
    }
    
    $("#realmaturesingles").hover(realMatureSinglesChange(), realMatureSinglesInitial());
    $("#seniorpeoplemeet").hover(seniorPeopleMeetChange(), seniorPeopleMeetInitial());
    </script>

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    What does your HTML look like?

    You could probably do this with CSS instead by using the :hover selector.

    :hover (CSS selector)
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div style="padding-bottom:5%;"><a href="http://www.atlantareviewgroup.com/dating/seniorpeoplemeetreview1.php" id="seniorpeoplemeet" style="width:50em; padding-right:3em;">Senior People Meet</a></div>
    I should do it not only in CSS, but in JavaScript, too, for multi-browser compatibility, right?

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by etidd View Post
    Code:
    <div style="padding-bottom:5%;"><a href="http://www.atlantareviewgroup.com/dating/seniorpeoplemeetreview1.php" id="seniorpeoplemeet" style="width:50em; padding-right:3em;">Senior People Meet</a></div>
    I should do it not only in CSS, but in JavaScript, too, for multi-browser compatibility, right?
    Nope. All you need is CSS.

    Granted, IE doesn't support the :hover selector for all HTML elements beyond the <a> tag, but you can add in a .htc behavior file to address the deficiency.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  5. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I would like to learn this in JavaScript just so I get some practice with JavaScript. Will you still help me?


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
  •