Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

This is what I have so far:

<div style="position: relative;"> <a href="#games">
    <div class="sidenavOff">
    <img src = "images/card_normal.png" />
    <img src = "images/category_icons/icon_games.png" style = "position: absolute; top: 10px; left: 40px;" />
    <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 160px; left: 40px;" />
    </div>
    <div class = "sidenavOver">
    <img src = "images/hover/card_hover.png" />
    <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 10px; left: 40px;" />
    <img src = "images/hover/card_hover_separator.png" style = "position: absolute; top: 40px; left: 40px;" />
    Show a bunch of text here
    <img src = "images/button_start_normal.png" style = "position: absolute; top: 200px; left: 40px;" />
    </div>
    </a>
</div>

So card.png is a notecard that has multiple transparent images overlayed on top of it. When the mouse is away from the card, it has icon_games.png and title_games.png showing on the card. I want it so that when the mouse hovers over card.png, icon_games.png, or title_games.png (in other words, whenever the mouse pointer is in the card), the card displays the elements title_games.png, card_hover_separator.png, a text description, and button_start_normal.png, in that order vertically (and the positioning of this should be editable as it will likely be different than the images displayed when not hovering).

This is my jquery code (I've never used it before so I'm pretty sure this is off. I don't quite understand it):

$(document).ready(function () {
    $(“div.sidenavOff”).mouseover(function () {
        $(this).removeClass().addClass(“sidenavOver”);
    }).mouseout(function () {
        $(this).removeClass().addClass(“sidenavOff”);
    });
});

In a more understandable format, without hover:

http://img834.imageshack.us/img834/7026/screenshot20130606at122.png

With hover:

http://imageshack.us/photo/my-images/855/screenshot20130606at122.png/

share|improve this question
.removeClass() needs to know what to remove, eg. .removeClass('sidenavOff') – Orbling Jun 6 at 21:17
you could just do all this using a .sideNavOff and a:hover sidenavOver class and without involving any jquery – jammykam Jun 6 at 21:22
1  
@Orbling - no it doesn't ! – adeneo Jun 6 at 21:22
@jammykam can you explain/show me further? This is my first time using HTML/JQUERY/CSS and I'm a bit confused at how it works. Should mention I never defined sidenavOff and sidenavOver in my css class either (thought I could just name it like you can name an id) – user2457563 Jun 6 at 21:24
@adeneo Didn't realise the parameter was optional. I've never had a use-case where I wanted to remove all classes from anything, sounds unsafe and fragile. – Orbling Jun 6 at 21:26
show 1 more comment

4 Answers

up vote 0 down vote accepted 
<div class="parent" style="position: relative;"> 
    <a href="#games">
        <div class="sidenavOff">
            <img src = "images/card_normal.png" />
            <img src = "images/category_icons/icon_games.png" style = "position: absolute; top: 10px; left: 40px;" />
            <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 160px; left: 40px;" />
        </div>
        <div class = "sidenavOver">
            <img src = "images/hover/card_hover.png" />
            <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 10px; left: 40px;" />
            <img src = "images/hover/card_hover_separator.png" style = "position: absolute; top: 40px; left: 40px;" />
                 Show a bunch of text here
            <img src = "images/button_start_normal.png" style = "position: absolute; top: 200px; left: 40px;" />
        </div>
    </a>
</div>

CSS

.parent .sidenavOver {display:none;}

.parent:hover .sidenavOver {display:block;}
.parent:hover .sidenavOff  {display:none;}

There's no need for javascript for this ?

share|improve this answer
This worked! Thanks so much :-) If i want to change the button image to something else once i hover on it (so a hover in a hover), would it be the same method? – user2457563 Jun 6 at 21:44
As long as an element is inside another element, using the css :hover method will work the same way, and to just change simple CSS rules, that is far easier than using jQuery. – adeneo Jun 6 at 21:46
do you possibly know how to make it fade in and out? – user2457563 Jun 7 at 6:12
@user2457563 - with CSS3 or jQuery ? – adeneo Jun 7 at 12:14
up vote 2 down vote

As i said, you don't need JavaScript:

http://jsfiddle.net/arEQy/

.sidenavOver {display:none}
a:hover .sidenavOff {display:none}
a:hover .sidenavOver {display:block}

You should add in some class names for the parent elements.

share|improve this answer
up vote 0 down vote

If I understand you correctly, you want to show a different when you mouse over the 'off' variation. And when you leave the 'Over' variation you want to show the original. This can be accomplished with this jQuery:

$(document).ready(function () {
    $("div.sidenavOff").mouseover(function () {
        $(this).siblings(".sidenavOver").show();
        $(this).hide();
    })

    $("div.sidenavOver").mouseout(function () {
        $(this).siblings(".sidenavOff").show();
        $(this).hide();
    });
});
share|improve this answer
Nothing changed :/ I put this in my header: <script type="text/javascript" language="Javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.4.4/…; <script type="text/javascript"> $(document).ready(function () { $(“div.sidenavOff”).mouseover(function () { $(".sidenavOver").show(); $(".sidenavOff").hide(); }) $(“div.sidenavOver”).mouseout(function () { $(".sidenavOff").show(); $(".sidenavOver").hide(); }); }); </script> – user2457563 Jun 6 at 21:26
jsfiddle.net/SmyzH/1 – Michael_B Jun 6 at 21:31
Ahh okay got it working, thanks :-) – user2457563 Jun 6 at 21:47
up vote 0 down vote

You could theoretically use CSS and the hover pseudo-class to achieve your ends:

.sidenavOver:hover {
    display:none
}

This would have the unfortunate side effect of flashing when you move your cursor, though, since :hover doesn't work when an element is hidden or not displayed.

The best option is Michael_B's answer, which takes advantage of jQuery's nifty helper functions .show() and .hide() .

share|improve this answer
Or you could just use the hover state of the parent element. jQuery show/hide just adds display:block/display:none and so any flashes of elements would be same anyway – jammykam Jun 6 at 21:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.