CODEWITHSUNDEEP
javascriptjqueryhtmlcss
tafteh
tafteh

Reputation: 17

permanently display hidden div

I have the following code:

    <div id="div3"><img src="" width="20px" /></div>
    <div id="div4">
    ... -> menu
    </div>

which by using the following:

    div3{
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -10px;
    }


    #div4{
    display: none;
    float:right;
    position: absolute;
    left: 60%;
    top: 50%;
    margin-top: -15px;
    margin-left: -70px;
    }

    #div3:hover + #div4 {
    display: block;
    }

I make the div4 show, after hovering #div3 (which is an image) . However I want div4 appears and remains after uncovering the #div3. I tried couple of codes in jquery but they do not work.

can you help?

Upvotes: 0

Views: 1271

Answers (5)

Alohci
Alohci

Reputation: 82976

You can (effectively) do this in pure CSS, such that it works in modern browsers. The trick is to use a very large value for a transition-delay when the hover exits. Like this:

#div3:hover + #div4 { opacity:1; height:20px;transition-delay:0s; }
#div4 { opacity:0; height:0; transition-delay:360000s; }

See http://jsfiddle.net/7Fw3A/1/

Upvotes: 1

BeNdErR
BeNdErR

Reputation: 17929

As PHPGlue said, you can't do that with just CSS.

You can do something like this using jquery, adjust the code based on your needs:

HTML

<div id="one">Hover me!</div>
<div id="two">HELLOO!</div>

JS

$("#one").on("hover", function(){
   $("#two").show(); 
});

FIDDLE

Upvotes: 2

Lawrence Jones
Lawrence Jones

Reputation: 955

I assume you want to make #div4 to appear once you've hovered over #div3, so do the following.

$('#div3').on('mouseover', function () {
  $('#div4').addClass('visible');
  $(this).off('mouseover');
});

This will add the class visible to #div4 when you mouseover #div3 for the first time. If you add a css selector .visible { visibility: visible; } then this will adjust #div4s css.

Upvotes: 0

piticent123
piticent123

Reputation: 303

As PHPglue said, you need Javascript to do this. (this is only one example. feel free to use whatever JS you want)

$('#div3').hover(function() {
    $('#div4').css('display', 'block');
}

Upvotes: 0

rjmunro
rjmunro

Reputation: 28056

Make sure that #div4 is always displayed while it is hovered over. Change your last CSS selector to something like:

#div3:hover + #div4, #div4:hover {
    display: block;
}

It will still go away when you move the mouse away from both div3 and div4, but that is often what you want to happen. If not, it's probably best to use a jQuery solution (I'm sure others will post one).

You could possibly add another transparent div that covered the full height and width of the page, give it a high z-index, and make sure that both it and div4 are displayed when that div is hovered over (as it will always be), but that sounds like a bad idea.

Upvotes: 0

Related Questions