CODEWITHSUNDEEP
javascripthtmlcss
orpqK
orpqK

Reputation: 2785

Mouse hover and click to display text with CSS and JS

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.

Upvotes: 0

Views: 1213

Answers (2)

Joel Worsham
Joel Worsham

Reputation: 1150

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.

Upvotes: 3

kei
kei

Reputation: 20491

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;
}

Upvotes: 2

Related Questions