Results 1 to 2 of 2

Thread: Hover + Show and Hide not working

  1. #1
    Join Date
    May 2011
    Posts
    13

    Angry Hover + Show and Hide not working

    http://k8r.us/test contains my display. I'm trying to get it so that the the ".postBar" hides when the mouse hovers out and shows when the mouse hovers in.

    The red box is the portion hat is suppose to activate the hover. The white box inside+the "59 minutes ago" is the portion that is suppose to go away.

    It doesn't work

  2. #2
    Join Date
    May 2011
    Posts
    19

    Making Hovers Work, 100% Success

    Try this technique:

    Code:
    <tag id='hover_trigger'> ...
    (Any HTML tag is OK. span, div, h1, h2, p, ul, li, ...)

    To use the trigger:

    Code:
    <script type='text/JavaScript'>
    var trigger = document.getElementById( 'hover_trigger' ); // grab it
        trigger.onmouseover = hover_func; // no parens!
    
    function hover_func() {
        alert( 'in hover_func()' ); 
    }
    When that works, hovering over the trigger (a div, a span, a whatever you want) will get your alert. Then replace your alert with the code you want to execute and test again.

    Here are the things to remember (which probably contradict what you've read):

    1) Do not assign "onclick" in the markup. Assign it in the JS. (This is the only way to be sure your code works in all browsers.)

    2) Do not assign a string to the onclick. Assign a function.

    3) When you assign a function, do not use parens! "my_func" is a reference to a function. "my_func()" executes and returns the results of the function.

    If your function displays previously hidden content, you'll need an "onmouseout" companion to hide the content. Use the same technique.

Similar Threads

  1. Show/hide element[Java]
    By chabuya in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 1
    Last Post: 23 Feb 2010, 03:47 AM

Posting Permissions

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