Mouse hover and click to display text with CSS and JS

Question

Currently I have this: http://jsfiddle.net/TW2Le/95/

I want to be able to click the box to display the text, then click anywhere else to hide the text. One click = show, 2nd click anywhere else = hide. (This part works)

When it is not "clicked", it should show the text when I hover over, but it should not display the text on top of the old text when I hover it while it is clicked.

i am running into a problem, where it displays double the text when I hover over while it is clicked. I have no idea how to disable "hover" while it is under the show condition. It should not repeat the same texts.

http://stackoverflow.com/questions/7035407/how-to-override-css-hover — user1329482, Jan 13 '14 at 19:40

score 3 · Answer 1 · answered Jan 13 '14 at 19:49

3

http://jsfiddle.net/TW2Le/97/

Try this.

$('.wrap').removeClass('reveal');

$('.wrap').addClass('reveal');

I added these into your jquery so that when "show" is visible, hovering does nothing.

answered Jan 13 '14 at 19:49

Joel Worsham

1,140
1
7
19

thank you both, very helpful! Wish I could accept both answers! – PhoonOne Jan 13 '14 at 19:54
His was more thorough ;) No worries. Glad to help. – Joel Worsham Jan 13 '14 at 20:05

kei · Accepted Answer · 2014-01-13T19:45:49.287

2

DEMO

JS

$(function() {
    $(document).on('click', function(e) {
        if ( $(e.target).closest('.wrap').length ) {
             $('.show').slideToggle();
            $('.noshow').slideToggle(); 
            $(".here").addClass("hide");
        }else{
            $('.show').slideDown();
            $('.noshow').slideUp();
            $(".here").removeClass("hide");
        }
    });
});

Add new CSS rule

.wrap:hover .here.hide {
    display:none;
}

edited Jan 13 '14 at 19:45

answered Jan 13 '14 at 19:40

kei

20,157
2
35
62

the problem with that is, I can't get it to hover show after one use – PhoonOne Jan 13 '14 at 19:40
@Jenny Updated solution. – kei Jan 13 '14 at 19:48
Ha, I guess you posted this while I was writing my answer. Pretty much the same answer. – Joel Worsham Jan 13 '14 at 19:50

Mouse hover and click to display text with CSS and JS

2 Answers2