ThemeShaper Forums » Thematic

add mouseover / mouseout attributes to page_item <li>s?

(2 posts)
  • Started 12 years ago by aceinnovations
  • Latest reply from aceinnovations
  • This topic is resolved
  1. aceinnovations
    Member

    My theme is a child theme of Thematic. I'd like to add mouseover/mouseout attrs. to the page navigation. Is there a way to hook in to that? The DOM hierarchy is something like, "li.page_item < ul < ul.xoxo ...".

    I'm alternately going to try to get it done with Prototype.js -- as soon as I figure out how to properly get some custom Javascript in to my child theme.(http://forums.themeshaper.com/topic/extrenal-javascript-using-child-theme)

    With Prototype I was thinking something like:

    document.observe("dom:loaded", function() {
    $$('ul.xoxo ul li').each(function(element) {
    // add another observe each for mouseover and mouseout
    });
    });

    but I've had problems getting this kind of thing working in Prototype before. Something about scope related to the .each method.

    Any better ideas?

    Posted 12 years ago #
  2. aceinnovations
    Member

    Mmm, my first taste of jQuery and I like it.

    jQuery(document).ready(function() {

    jQuery("ul.xoxo ul li a").bind("mouseenter mouseleave", function() {
    jQuery(this).toggleClass('mouseOver');
    });

    });

    Posted 12 years ago #

RSS feed for this topic

Reply

You must log in to post.