SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery hover Help

    Not sure why this script is not running:
    Help is appreciated

    <script src="http://code.jquery.com/jquery-git.js"></script>
    <script>
    <!--


    $(document).ready(function() {
    //call the jQuery Hover Over and Out
    $(".calBox").hover(over, out);
    //Tell the browser to show content
    function over(event) {
    $(this).next(".caltextoverlay").show();
    $(this).next(".calregistertext").show();
    }
    //tell the browser to hide content
    //going outside the object area
    function out(event) {
    $(this).next(".caltextoverlay").hide();
    $(this).next(".calregistertext").hide();
    }
    });


    //-->
    </script>


    html
    <li>
    <a class="calBox" href="#">
    <div>
    <span class="calregistertext">register &#x25B8;</span></span>
    <span class="caltextoverlay">
    <span class="caldescriptiontext">Curabitur aliquet cone ni si nection blis septed</span></span>
    <img src="images/cal1.jpg" alt="" border="0" height="150" width="155">
    </div>
    </a>
    </li>


    css
    .caltextoverlay {
    position: absolute;
    top:95px;
    left:0px;
    width: 155px;
    height: 35px;
    color: white;
    display: none;
    }

    .calregistertext {
    position: absolute;
    top:3px;
    left:95px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #ffffff;
    display: none;

    }

  2. #2
    SitePoint Member
    Join Date
    Apr 2010
    Location
    Charlotte, NC
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .next() is only going to iterate over siblings of .calbox which is why you're not getting anything. What you could use in its place is .find() and it should fire off.

    One thing I would suggest would be to change your anchor tag to a div tag. You can still use jQuery to bind to the hover event on that class.

    You'll probably come up against the need to make sure that your register text and description stay open because once you go off the calbox it's going to hide.

    If you want to write it custom, I say great. However, if you would be interested in a plugin that could manage this and is a great plugin (IMO) I would check out hoverIntent.
    LinkedIn : VernonK
    Web Development Resources : ChooseDaily.com

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your help,
    Now after understand why it wasn't working I when back and updated the JQ
    here is the updated html and JQ below. And now that I have this working my next step will be injecting the hoverIntent plug-in. Thanks for that.



    $(document).ready(function() {
    $(".calBox").hover(
    function() { $(this).children('.jqhover').show(); },
    function() { $(this).children('.jqhover').hide(); }
    );

    });

    <li>
    <a href="#">
    <div class="calBox" >
    <span class="calregistertext jqhover">register</span>
    <span class="caltextoverlay jqhover">
    <span class="caldescriptiontext">Curabitur aliq</span></span>
    <p> other stuff in this div</p>
    </div>
    </a>
    </li>

    <li>
    <a href="#">
    <div class="calBox" >
    <span class="calregistertext jqhover">register</span>
    <span class="caltextoverlay jqhover">
    <span class="caldescriptiontext">Curabitur aliq</span></span>
    <p> other stuff in this div</p>
    </div>
    </a>
    </li>

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    One thing I would suggest would be to change your anchor tag to a div tag. You can still use jQuery to bind to the hover event on that class.
    So what do keyboarders/laptop users/mobile users do?

    (I note the jQuery itself completely ignores those users anyway)


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
  •