Jquery Hover Function if/else

Question

I am trying to display different classes (which have background images) dependent upon which link is hovered over. I have put together a JSfiddle to show how far i have got.

The problem is that upon hover no image is shown.

I am also concerned about the structure of my html, in particular a class shows a different number of stars dependent upon its name, so to show two stars use class

.twoStars

three stars use

.threeStars

and so on... Is this ok? is there a better way to do this? And rather than add the correct class that holds the number of stars to each li element in the html, could I not Add the class upon hover with jquery? I know that jquery has the addClass method but this just adds it to the li class instead of being the next element within my li...

Hope that makes sense, I guess the fiddle will clear things up.

Any help appreciated and just wondering why my current setup isnt working as expected

Thanks

You do realize, as written, originaltext[$(this).index('.skillsDouble li')] never finds anything because originaltext is never set, right? — SpYk3HH
– SpYk3HH, Commented Jun 24, 2013 at 12:41
I was under the impression that i was inserting the text value of the li element into an array when hovering? — Richlewis
– Richlewis, Commented Jun 24, 2013 at 12:44
you need to check the children() for the text jsfiddle.net/RZqDs/4 — cptnk
– cptnk, Commented Jun 24, 2013 at 12:47
No, however, I updated your jsFiddle here to show you how to fill that array. It also gives console.log info for you to look at — SpYk3HH
– SpYk3HH, Commented Jun 24, 2013 at 12:48
you´ll also need a mouseleave() event so you can hide those stars when leaving the li I suppose. — cptnk
– cptnk, Commented Jun 24, 2013 at 12:54

SpYk3HH · Accepted Answer · 2013-06-24 13:39:36Z

Ok, First, as I pointed out in comments, you're Array is not being filled, thus your if statements are misfiring. That aside, while the class naming system is not so bad (though I think dashes are more standard with class names than lower camel casing), There is some serious conflict in your jQuery.

Your CSS is fine as is and the HTML structure is not horrid. I could change either, but I would start with the Javascript, as I imagine, you've probably already put a lot of HTML, and possibly CSS down. The js is a simple and easy change. The following is how "I" might rewrite it if it was handed to me. I believe it's achieving the effect you desire, without a long drawn if statement. I also keep record of "original text" using jQuery's .data() method, though I see no use for it at the moment.

$(function() {
    //  saves "original text" to LI element's data
    $('.skillsDouble li').each(function(i) { $(this).data("oText", $.trim($(this).text())); });
    //  begins "delegating" events to selected elements, in this case, 'mouseenter' to all LI's of .skillsDouble
    $(document).on("mouseenter", '.skillsDouble li', function(e) {
        //  just to make things easy, I grab the stuff we want to work with and make it local variables
        var txt = $(this).find('.text'),    //  our text element
            rate = $(this).find('[class*=Star]'),   //  our ratings element based on any inner element having a class name "containing the phrase 'Star'"
            oText = $(this).data("oText");  //  our original text, if you still want it for something else

        txt.stop().hide();  //  hide the text
        rate.stop().animate({   //  show the stars
            left: 400,
            opacity: "show"
        });
    })
    .on("mouseleave", '.skillsDouble li', function(e) { //  now delegate mouseleave
        //  same localvariables
        var txt = $(this).find('.text'), rate = $(this).find('[class*=Star]'), oText = $(this).data("oText");

        rate.stop().hide(); //  hide the stars
        txt.stop().fadeIn(1000);    //  show the text
    })
})

Working Example

Alt Example
_{_{- Shows some alternate use of "fade" effects as well}}

Thanks for such an in depth answer, plenty here to learn from

Matthias Wegtun · Accepted Answer · 2013-06-24 12:38:18Z

0

There is a display:none; in the css. but in the Javascript when it is supposed to show you need to add a display:block;

You use a string in opacity, you can remove this. it takes numbers between 0 and 1, and you would only need an opacity in the css as well. (http://www.quirksmode.org/css/opacity.html)

answered Jun 24, 2013 at 12:38

Matthias Wegtun

1,2611 gold badge9 silver badges13 bronze badges

2 Comments

Richlewis Over a year ago

display none is in the css to initially hide the element until the hover event takes place, upon hover that stops and the image is then animated into the div...well thats how its supposed to work

Matthias Wegtun Over a year ago

@Richlewis look at the accepted answer stackoverflow.com/questions/9571771/… there is a use of display block needed as well. else it will stay display none.

Collectives™ on Stack Overflow

Jquery Hover Function if/else

2 Answers 2

Working Example

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related